jQuery - div 在下一个开始淡入之前没有完全淡出

Question

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

参见jsfiddle .

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

Answer 1

文档中的这句话解释了您的问题( fadeOut ):

If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

换句话说，因为您正在为两件事设置动画，所以回调将被调用两次。由于您的一个 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/

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