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