jquery - 分组切换后的jQuery淡入

Question

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

我怎样才能使它淡入是最后运行的东西？

<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因为.showif 循环运行了四次，如果我使用回调来淡入淡出，那么我将有四次相同的淡入淡出。

Answer 1

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

http://jsfiddle.net/3fEeb/

关键是在回调里面检查是否所有的span都可见，如果是这样，fade in the slogan..

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 演示

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 演示

---

使用 .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");
        });  
    }
}

这可能对你有用。