3

这个问题很简单，我知道，但我花了很长时间试图弄清楚。我在一个页面上有 8 个 div，其中包含开始隐藏的图像库。当用户单击图标查看图库时，他们选择的第一个图库会淡出所有闪亮。但是当他们选择另一个时，他们正在查看的那个开始淡出，而另一个在它下面淡入，然后在第一个 div 被隐藏时向上移动到正确的位置。

见jsfiddle。

所以，我的问题很明显：
我如何让他们正在查看的画廊在下一个淡入正确空间之前完全淡出。

4

4 回答 4

7

文档中的这句话解释了您的问题（fadeOut）：

如果为多个元素设置了动画，请务必注意，每个匹配的元素都会执行一次回调，而不是对整个动画执行一次。

换句话说，因为您正在为两件事设置动画，所以回调将被调用两次。因为您的一个 div 已经隐藏，所以fadeOut立即完成*，并立即回调。

*如果已经显示/隐藏，则立即完成是显示/隐藏类型辅助功能所独有的。如果您构建自己的淡入淡出动画，无论当前状态如何，它总是需要指定的时间。

您可以通过多种方式解决此问题。最简单的方法是将您的fadeOut()调用链接在一起，而不是在两个元素上调用一个：

$('.icon_one').click(function() {
    $('#image_two').fadeOut(function() {
        $('#image_three').fadeOut(function() {
            $('#image_one').fadeIn();
        });
    });
});

因为一个通常已经被隐藏，它会立即消失，但另一个需要时间。无论哪种方式，只有在两者都完成之后才会发生淡入。

演示：http: //jsfiddle.net/jtbowden/XQnhs/

当然，只需对您的 HTML 稍作改动，您就可以通过单击处理程序完成所有三个操作：

<div id="image_one" class="imageBox" style="background-color:red;height:50px;width:50px">&nbsp;</div>  
<div id="image_two" class="imageBox" style="background-color:blue;height:50px;width:50px">&nbsp;</div>
<div id="image_three" class="imageBox" style="background-color:yellow;height:50px;width:50px">&nbsp;</div>

<div data-num="one" class="icon_show">Red</div>
<div data-num="two" class="icon_show">Blue</div>
<div data-num="three" class="icon_show">Yellow</div>

脚本：

$('.icon_show').click(function() {
    var showID = '#image_' + $(this).data('num');
    $('.imageBox:visible').fadeOut(function() {
        $(showID).fadeIn(400);
    });
});

演示：http: //jsfiddle.net/jtbowden/NAcPW/

关键是您会根据单击的链接自动确定要显示的链接。在这种情况下，我通过在数据属性中存储一个数字来做到这一点。您也可以只使用 ID 的一部分，或者通过使用计算偏移量index然后将其输入eq.

演示：http: //jsfiddle.net/jtbowden/NnN58/

有很多方法可以简化此代码。

于 2012-04-11T17:23:47.270 回答
3

这很有趣……我喜欢你设置 jsfiddle 的方式——它使玩起来更容易。看看这是否有帮助..fadeOuts 绑定的不仅仅是元素。只淡出可见的。我认为你的问题是淡出被调用已经淡出的元素。

这是您的 jsfiddle 的细微变化..

$(function(){
        $('#image_two,#image_three').hide();

//1//       

          $('.icon_one').click(function(){                
              $('#image_two:visible,#image_three:visible').fadeOut(
                  function(){

                     $('#image_one').fadeIn();
                  }
              );
           });

//2//
alert("binding");
   $('.icon_two').click(function(){
       $('#image_one:visible,#image_three:visible').fadeOut(
            function(){
                $('#image_two').fadeIn();
             }
                                            );
  });

    //3//

   $('.icon_three').click(function(){
       $('#image_one:visible,#image_two:visible').fadeOut(function(){
        $('#image_three').fadeIn();
        });
  });

});
于 2012-04-11T17:33:36.103 回答
2

您可以将 div 放在彼此之上position:absolute;

工作示例：http: //jsfiddle.net/Ghokun/wnTte/13/

于 2012-04-11T17:31:51.627 回答
1

换个怎么样

$('#image_one').fadeIn();

和

$('#image_one').delay(500).fadeIn();

和明智的....

于 2012-04-11T17:19:14.860 回答