Jquery 同时使用Toggle和FadeIn的问题事实 #事实调查箱{ 高度：200px；宽度：200px；颜色：蓝色；边框样式：虚线；位置：相对位置； } .替换{ 高度：200px；宽度：200px； } $（函数（）{ $（“#事实框”）。单击（函数（）{ $（此）.toggle（函数（）{ $（“.box_image”）.fadeOut（）.replacetwith（“+”超人返回“+”）； }，函数（）{ $（“.replace”）.fadeIn（）.replaceWith（“”） }); }); });_Jquery

Jquery 同时使用Toggle和FadeIn的问题事实 #事实调查箱{ 高度：200px；宽度：200px；颜色：蓝色；边框样式：虚线；位置：相对位置； } .替换{ 高度：200px；宽度：200px； } $（函数（）{ $（“#事实框”）。单击（函数（）{ $（此）.toggle（函数（）{ $（“.box_image”）.fadeOut（）.replacetwith（“+”超人返回“+”）； }，函数（）{ $（“.replace”）.fadeIn（）.replaceWith（“”） }); }); });

jquery

Jquery 同时使用Toggle和FadeIn的问题事实 #事实调查箱{ 高度：200px；宽度：200px；颜色：蓝色；边框样式：虚线；位置：相对位置； } .替换{ 高度：200px；宽度：200px； } $（函数（）{ $（“#事实框”）。单击（函数（）{ $（此）.toggle（函数（）{ $（“.box_image”）.fadeOut（）.replacetwith（“+”超人返回“+”）； }，函数（）{ $（“.replace”）.fadeIn（）.replaceWith（“”） }); }); });,jquery,Jquery,嗨，我需要一些调试JQuery代码的帮助。当我单击图像时，我希望它淡出并被div元素替换。当我下一步单击div元素时，我希望它被图像替换。有人能告诉我哪里出了问题吗？您的toggle（）方法的链接不正确，而且您有一个click（）处理程序和一个toggle（）iside，请尝试以下操作： <!DOCTYPE html> <html> <head> <title>Fact</title> <style type

嗨，我需要一些调试JQuery代码的帮助。当我单击图像时，我希望它淡出并被div元素替换。当我下一步单击div元素时，我希望它被图像替换。有人能告诉我哪里出了问题吗？

您的

toggle（）

方法的链接不正确，而且您有一个

click（）

处理程序和一个

toggle（）

iside，请尝试以下操作：

<!DOCTYPE html>
<html>
  <head>
    <title>Fact</title>

    <style type="text/css">

    #fact_box {
      height: 200px;
      width: 200px;
      color: blue;
      border-style: dotted;
      position: relative;
    }


    .replace {
      height: 200px;
      width:  200px;
    }

    </style>
    <script type="text/javascript" src="jquery-1.4.js"></script>
    <script type="text/javascript">

$(function () {
    $("#fact_box").click(function () {
        $(this).toggle(function () {
            $(".box_image").fadeOut().replaceWith('<div class="replace">' + "Superman Returns" + '</div>');
        }, function () {
            $(".replace").fadeIn().replaceWith('<img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/>')
        });
    });
});

    </script>
  </head>

  <body>
  <div id="fact_box">
  <img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/>
  </div>
  </body>
</html>

$（“#事实框”）。切换(
函数（）{
$（“.box_image”，此）.fadeOut（500，函数（）{
$（this）.replace为（'Superman Returns'）；
});
},   
函数（）{
$（“.replace”，this）.fadeOut（500，function（）{
$（此）。替换为（“”）；
});
}
);

你不应该同时绑定这两个，试试这个

$("#fact_box").toggle(
    function() {
        $(".box_image", this).fadeOut(500, function() {
            $(this).replaceWith('<div class="replace">Superman Returns</div>');
        });
    },   
    function() {
        $(".replace", this).fadeOut(500, function() {
            $(this).replaceWith('<div class="box_image"></div>');
        });
    }
);

$（函数（）{
$（“#事实框”）。切换（函数（）{
//console.log（'even'）；
$（“.box_image”）.fadeOut（）.replacetwith（“+”超人返回“+”）；
}，函数（）{
//console.log（'odd'）；
$（“.replace”）.fadeIn（）.replaceWith（“”）
});
});

在替换元素之前，您可能应该使用回调函数来完成动画。

当前出现了什么问题？您使用的toggle（）错误，请参见Stefan，我指的是这本书《JQuery在行动》，它给出了另一种toggle语法，您共享的链接中没有提到。toggle（listener1，listener2，…）将传递的函数建立为包装集所有元素上单击事件处理程序的循环列表。在随后的每个单击事件中，都会按顺序调用处理程序。参数listenerN（函数）用作后续单击事件处理程序的一个或多个函数。返回已包装的集合。@单击一次，什么也不会发生。双击，它会淡出。但在点击任何次数后都不会褪色henceforth@Anthony下面是指向此函数的链接-

$(function () {
    $("#fact_box").toggle(function () {
          //console.log('even');
            $(".box_image").fadeOut().replaceWith('<div class="replace">' + "Superman Returns" + '</div>');
        }, function () {
          //console.log('odd');
            $(".replace").fadeIn().replaceWith('<img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/>')
        });
});