分组切换后的jQuery fadeIn

我有以下内容，但

$（“span#标语”）.fadeIn（“慢”）不会运行

我怎样才能使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>


#隐藏跨度{
显示：无；
浮动：左；
字体大小：20px；
}
$（文档）.ready（函数（）
{   
函数showDiv（）{
if（$（'hidden span:not（#标语））.is（'hidden'））{
$（'hidden span:not（#标语）：hidden:first'）。show（“bounce”，{times:3}，500）；
设置超时（showDiv，500）；
}
$（“口号”）.fadeIn（“慢”）；
}
$（“按钮”）。单击（函数（）{
showDiv（）；
});
});
点击
T
E
x
T
标语

​
回调

我无法在
.show
上使用回调，因为由于if循环，
.show
运行了四次，如果我使用对fadeIn的回调，那么我将使用相同的fadeIn四次

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

这可能对您有用。
我已经为您创建了这个JSFIDLE，需要注意的是，我删除了反弹效果，因为我无法将其包含在JSFIDLE中


关键是要在回调中检查所有跨度是否可见，如果是这样，则在标语中淡入淡出

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

这是一种不用设置超时的方法：


编辑：（为了避免
#标语
fadeIn运行4次或更多次。请参阅注释）


使用.length:

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');
}

我不明白，你说fadeIn是最后一个运行的东西（在If之后），你的问题是它将如何成为最后一个运行的东西？目前fadeIn在If中的循环完成之前运行，我试图让fadeIn只在if中的循环完成后运行。选择器中的：第一个不是意味着只有一件事使用了反弹效果吗？它甚至对我不起作用，包括jquery和jquery ui脚本，单击按钮什么都没有，没有控制台错误什么都没有，还设置了#hidden{display:none；}，好的，我已经开始工作了，我一直在拖延，我现在明白你的意思了。可能需要使用
$（文档）。就绪（函数（）{
我会更新代码OK，我认为问题在于，第一个跳转完成后，它会再次启动函数，查找下一个匹配的隐藏跨距，需要某种方法来计算所有隐藏跨距并在最后启动它，或者以稍微不同的方式进行操作。但是，由于它是循环的，因此在每次跳转后都会运行“回调”4次
.show
循环在哪里？你的意思是反弹3次？所有
span
都是
显示：无
，因此它对每个
span
应用反弹效果。唯一的问题是这会运行四次fadeIn，它需要组合所选答案才能正常工作。@Silver89重新编辑。在每个函数中添加了一个计数器。它计算所有元素，并将该var传递给#口号延迟：）。
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');
}

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');
}