Question

我有以下内容，但在if语句完成循环隐藏元素后，$("span#slogan").fadeIn("slow");没有运行。

我怎样才能使fadeIn成为最后一个运行的东西？

<style type="text/css">
#hidden span{
    display:none;
    float:left;
    font-size:20px;
}
</style>

<script type="text/javascript">
$(document).ready(function()
{   
    function showDiv() {

        if($('#hidden span:not(#slogan)').is(':hidden')) {

            $('#hidden span:not(#slogan):hidden:first').show("bounce", { times:3 }, 500);  
            setTimeout(showDiv, 500);
        }

        $("span#slogan").fadeIn("slow");
    }

    $("button").click(function() {
        showDiv();
    });
});
</script>

<button>Click</button>

<div id="hidden">
    <span>T</span>
    <span>e</span>
    <span>x</span>
    <span>t</span>
    <span id="slogan">Slogan</span>
</div>

的回调

我无法在.show上使用回调，因为.show因为if循环而运行了四次，如果我使用fondIn回调那么我会有四次相同的fadeIn。

Answer 1

我已经为你创建了这个JSFiddle，重要的是要注意我删除了弹跳效果，但是我无法在jsFiddle中包含它。

http://jsfiddle.net/3fEeb/

关键是在回调检查中是否所有跨距都可见，如果是这样的话，淡出口号..

function showDiv() {
    if($('#hidden span:not(#slogan)').is(':hidden')) {
        $('#hidden span:not(#slogan):hidden:first').show("bounce", { times:3 },function() {        
            if($('#hidden span:not(#slogan):hidden:first').length==0){
                $("span#slogan").fadeIn("slow");
            }
        });  
        setTimeout(showDiv, 500);
    }
}

Answer 2

只是一种没有setTimeout的方法：

jsBin demo

function showDiv() {
  $('#hidden span:not(#slogan)').each(function(i,e){
    $(this).delay(i*300).show("bounce", { times:3 }, 500, function(){
      $('#slogan').fadeIn('slow');
    });  
  });     
}

<小时/> 编辑：（为了避免#slogan淡入淡出4次/次。请参阅评论）

function showDiv() {
  var c = 0;
  $('#hidden span:not(#slogan)').each(function(i,e){
    c++;
    $(this).delay(i*300).show("bounce", { times:3 }, 500);
  });
  $('#slogan').delay(c*300).fadeIn('slow');
}

jsBin demo

<小时/> 使用.length： demo3

function showDiv() {
  $('#hidden span:not(#slogan)').each(function(i,e){
    $(this).delay(i*300).show("bounce", { times:3 }, 500);
  });
  $('#slogan').delay( $('#hidden span').length * 300 ).fadeIn('slow');
}

Answer 3

function showDiv() {
    if($('#hidden span:not(#slogan)').is(':hidden')) {
        $('#hidden span:not(#slogan):hidden:first').show("bounce", { times:3 }, 500, function(){
            $("span#slogan").fadeIn("slow");
        });  
    }
}

这可能适合你。

分组切换后jQuery淡入淡出

3 个答案:

jsBin demo

jsBin demo