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

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/

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