Question

问题是一个简单的问题，我知道，但我有一点时间试图解决它。我在页面上有8个div，它们保存着隐藏的图像库。当用户点击图标查看图库时，他们选择的第一个图库会闪烁。但是当他们选择另一个时，他们正在观看的那个开始淡出而另一个在它下面消失，然后在第一个div被隐藏时向上移动到正确的位置。

请参阅jsfiddle。

所以，我的问题显而易见：
在下一个画廊消失到正确的空间之前，如何让他们正在查看的画廊完全淡出。

Answer 1

您的问题由文档（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/

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

Answer 2

这很有趣......我喜欢你设置你的jsfiddle的方式 - 它让你更容易玩。看看这是否有帮助.. fadeOuts被绑定到多个元素。只淡出可见的一个。我认为你的问题是fadeout正在调用已经淡出的元素。

这是你的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();
        });
  });

});

Answer 3

您可以使用position:absolute;

将div放在彼此的顶部

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

Answer 4

如何更换

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

与

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

并且明智......

jQuery - 在下一次开始消失之前，div不会完全淡出

4 个答案: