fadeOut / In函数产生闪烁

时间:2015-01-10 17:26:21

标签: jquery html

我在点击按钮时使用标题值来显示/隐藏一些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);
});

1 个答案:

答案 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);
    });    

});