jquery如何仅在单击事件后触发呼叫答案

【问题标题】：jquery how to fire a call only after click eventjquery如何仅在单击事件后触发呼叫
【发布时间】：2012-12-05 22:00:03
【问题描述】：

我目前正在实现一个带有淡入效果的点击功能，唯一的问题是如果你不立即点击内容已经淡出，因为它在页面加载时开始淡出。
这是我的代码：

$(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 是隐藏的，当点击#button #slide-02 淡入时，字母's' 和'b' 淡出#slide-02 但我只希望这些字母在#slide-02 出现后开始淡出页面加载时可见且不会开始褪色，因为当前如果您不立即单击按钮，则字母已经褪色。
有没有办法只在点击功能实现后才实现这个调用？
然后我将一张接一张地添加更多幻灯片，所以如果可能的话，我希望这个电话可以多次工作？

【问题讨论】：

标签： jquery html function

【解决方案1】：

你能把所有的东西都放在 click 函数里吗？你不这样做有什么原因吗？

$('#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/

【讨论】：

【解决方案2】：

只需将代码隐藏在 click 函数中即可。 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);
});

【讨论】：

【解决方案3】：

将代码放在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();
    });

【讨论】：

【解决方案4】：

您可以实现promise 以与更复杂的动画链进行交互。

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

这样做的好处是绑定到动画的结尾，因此如果您决定更改淡出时间，则不必更改淡出时间。

另见：Jquery - defer callback until multiple animations are complete

【讨论】：