jQuery – 在下一次开始消失之前，div不会完全淡出
我知道，这个问题很简单，但是我有一段时间试图解决这个问题。 我在页面上有8个div，用于保存隐藏起来的图像库。 当用户点击图标查看图库时，他们选择的第一个图库会闪烁。 但是当他们选择另一个时，他们正在观看的那个开始淡出而另一个在它下面消失，然后在第一个div被隐藏时向上移动到正确的位置。
见jsfiddle 。
所以，我的问题很明显：
在下一个画廊消失到正确的空间之前，如何让他们正在查看的画廊完全淡出。
您可以将div放在彼此的顶部， position:absolute;
工作示例： http ： //jsfiddle.net/Ghokun/wnTte/13/
您的问题由文档中的这句话解释（ fadeOut ）：
如果动画了多个元素，请务必注意每个匹配元素执行一次回调，而不是整个动画执行一次。
换句话说，因为你是动画两件事，回调将被调用两次。 因为你的一个div已经被隐藏了， fadeOut立即完成*，并立即回调。
* 即时完成如果已显示/隐藏对于显示/隐藏类型帮助程序function是唯一的。 如果您构建了自己的淡入淡出动画，则无论当前状态如何，它都将花费指定的时间。
你可以通过几种方式解决这个问题。 最简单的方法是将fadeOut()调用链接到彼此内部，而不是在两个元素上调用一个：
$('.icon_one').click(function() { $('#image_two').fadeOut(function() { $('#image_three').fadeOut(function() { $('#image_one').fadeIn(); }); }); });
因为一个人通常会被隐藏，它会立即掉落，但另一个则需要时间。 无论哪种方式，只有在两者完成后才会发生淡入淡出。
演示： http ： //jsfiddle.net/jtbowden/XQnhs/
当然，只需对HTML进行一些更改，您就可以通过一次单击处理程序完成所有这三项操作：
Red Blue Yellow
脚本：
$('.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/
有很多方法可以简化此代码。
这很有趣……我喜欢你设置你的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(); }); }); });
如何更换
$('#image_one').fadeIn();
同
$('#image_one').delay(500).fadeIn();
和明智的……