我在点击按钮时使用标题值来显示/隐藏一些div。 第一个按钮将仅显示 ab 值的div,第二个按钮将显示所有div。一切(有点)都有效,但是当显示所有div时,fadeOut / In会产生令人讨厌的眨眼......(你可以在JSFIDDLE中看到它)
HTML
<button id="ab">AB</button>
<button id="all">ALL</button>
<hr>
<div class="work" title="ab">AB</div>
<div class="work" title="dc">DC</div>
<div class="work" title="ab">AB</div>
<div class="work" title="dc">DC</div>
SCRIPT
$( "#ab" ).click(function(){
$( ".work" ).fadeOut(400);
$( ".work[title *='ab']" ).fadeIn(400);
});
$('#all').click(function(){
$( ".work[title *='ab']" ).fadeOut(400);
$( ".work" ).fadeIn(400);
});
答案 0 :(得分:3)
你的问题是fadeOut和fadeIn同时执行(它们是异步的),这通常会导致意外和不吸引人的结果。这两个函数都提供了可选的回调,您应该使用这些回调,以便在fadeOut完成后发生fadeIn。
示例:
$( "#ab" ).click(function(){
$( ".work" ).fadeOut(400, function(){
// This anonymous function executes after fadeOut has finished. It is provided
// as a callback to fadeOut.
$( ".work[title *='ab']" ).fadeIn(400);
});
});