0

現在、フェードイン効果のあるクリック機能を実装しています。唯一の問題は、すぐにクリックしないと、ページが読み込まれたときにコンテンツがフェードし始めたため、コンテンツがすでにフェードアウトしていることです。
これが私のコードです：

$(document).ready(function(){
$('#slide-02').hide();


$('#button').click(function(){
$('#slide-02').fadeIn(1000);
$('#slide-01').hide();
});
    var charToReplace = ['s', 'b', 'S', 'B'];
    $('#slide-02').html(function (i, v) {
        var resultStr = '';
        for (var i = 0; i < v.length; i++ ) {
            var ch = v.charAt(i);
            
            if ($.inArray(ch, charToReplace) >= 0) {
               resultStr += '<span class="hideMe">' + ch + '</span>';  
            } else {
               resultStr += ch;
            }
        }
        
        return resultStr;
    }).find('.hideMe').delay(2000).fadeOut(3000, function(){
        $(this).css('opacity', 0).show();            
    });
    
    //lets bring it all back
    setTimeout(function () {
        $('#slide-02').find('.hideMe').css('opacity', 0);
    }, 5000);
});


動作中のコードのライブモック アップもここに
あり#slide-02ます#slide-02。の#slide-02しかし、これらの文字#slide-02が表示されたときにのみフェードを開始し、ページがロードされたときにフェードを開始しないようにしたい.
クリック機能が実装された後にのみこの呼び出しを実装する方法はありますか?
次に、スライドを次々と追加するので、可能であればこの呼び出しを何度も機能させたいですか?

4

4 に答える 4

1

より複雑なアニメーション チェーンとやり取りするpromiseを実装できます。

$('#slide-02').promise().done(function() {
    // Rest of your character hiding code goes here
});

これには、アニメーションの最後に結び付けるという利点があるため、フェードアウトのタイミングを変更する場合でも、フェードアウトのタイミングを変更する必要はありません。

参照: Jquery - 複数のアニメーションが完了するまでコールバックを延期する

于 2012-12-05T22:15:21.967 に答える
1

クリック関数内に文字を非表示にするコードを配置するだけです。更新されたデモはこちらです。

$('#button').click(function(){
    $('#slide-02').fadeIn(1000);
    $('#slide-01').hide();
    var charToReplace = ['s', 'b', 'S', 'B'];
    $('#slide-02').html(function (i, v) {
        var resultStr = '';
        for (var i = 0; i < v.length; i++ ) {
            var ch = v.charAt(i);

            if ($.inArray(ch, charToReplace) >= 0) {
               resultStr += '<span class="hideMe">' + ch + '</span>';  
            } else {
               resultStr += ch;
            }
        }
        return resultStr;
    }).find('.hideMe').delay(2000).fadeOut(3000, function(){
        $(this).css('opacity', 0).show();            
    });

    //lets bring it all back
    setTimeout(function () {
        $('#slide-02').find('.hideMe').css('opacity', 0);
    }, 5000);
});
于 2012-12-05T22:11:24.763 に答える
1

クリック機能の中にすべてを入れることはできますか? そうしない理由はありますか？

$('#button').click(function(){
$('#slide-02').fadeIn(1000);
$('#slide-01').hide();
        var charToReplace = ['s', 'b', 'S', 'B'];
    $('#slide-02').html(function (i, v) {
        var resultStr = '';
        for (var i = 0; i < v.length; i++ ) {
            var ch = v.charAt(i);

            if ($.inArray(ch, charToReplace) >= 0) {
               resultStr += '<span class="hideMe">' + ch + '</span>';  
            } else {
               resultStr += ch;
            }
        }

        return resultStr;
    }).find('.hideMe').delay(2000).fadeOut(3000, function(){
        $(this).css('opacity', 0).show();            
    });
});

http://jsfiddle.net/WrM6c/

于 2012-12-05T22:12:08.800 に答える
1

次のように、fadeIn の関数コールバックにコードを配置します。これは、fadeIn アニメーションが完了したときに実行されます。

    $('#button').click(function(){
        $('#slide-02').fadeIn(1000, function () {
           var charToReplace = ['s', 'b', 'S', 'B'];
           $('#slide-02').html(function (i, v) {
               var resultStr = '';
               for (var i = 0; i < v.length; i++ ) {
                   var ch = v.charAt(i);

                   if ($.inArray(ch, charToReplace) >= 0) {
                       resultStr += '<span class="hideMe">' + ch + '</span>';  
                   } else {
                       resultStr += ch;
                   }
               }

               return resultStr;
           }).find('.hideMe').delay(2000).fadeOut(3000, function(){
                $(this).css('opacity', 0).show();            
           });

           //lets bring it all back
           setTimeout(function () {
              $('#slide-02').find('.hideMe').css('opacity', 0);
           }, 5000);            
       });
    $('#slide-01').hide();
    });
于 2012-12-05T22:08:05.513 に答える