2

私は次のものを持っていますが$("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>

コールバック

.showif ループのためにコールバックが 4 回実行されるため、コールバックを使用できません。コールバック.showを使用すると、fadeIn が 4 回発生します。

4

3 に答える 3

2

この 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);
    }
}
于 2012-04-14T15:00:12.463 に答える
1

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

編集：（フェードインを避けるために#slogan4回以上実行します。コメントを参照してください）

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');
}
于 2012-04-14T15:16:56.023 に答える
0 
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");
        });  
    }
}

それはあなたのためにそれをするかもしれません。

于 2012-04-14T14:56:06.523 に答える