jquery如何僅在點擊事件後觸發一個電話

Question

我目前正在實現帶淡入效果的點擊功能，唯一的問題是如果你不馬上點擊，內容已經消失，因爲它開始褪色時頁面已加載。
這裏是我的代碼：

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

下面的代碼在行動現場模擬了太多：http://nealfletcher.co.uk/fish/test2/
所以#slide-02被隱藏，被點擊＃鍵時#slide-02淡入，字母「S」和'b'淡出#slide-02，但我只希望這些字母開始淡入一次#slide-02可見，並且在加載頁面時不會開始淡入淡出，因爲目前如果您沒有立即單擊該按鈕，字母已經消失。
有沒有一種方法可以在點擊功能實現後才實現這個調用？
我會一個接一個地添加更多幻燈片，所以如果可能的話，我希望這個調用可以多次工作？

Answer 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/

Answer 2

放入淡入的回調函數的代碼，當你的淡入動畫已經完成，這將運行，就像這樣：

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

Answer 3

只要把代碼隱藏點擊功能中的字符。 Heres已更新的演示。

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

Answer 4

您可以實現一個promise與更復雜的動畫鏈互動。

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

這已追平到動畫結束的利益，所以你不必改變你的淡出計時，如果你決定改變你的淡出時機。

另請參閱：Jquery - defer callback until multiple animations are complete