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

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

Answer 2

只需将代码隐藏在点击功能中即可。 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 3

你能把所有内容都放在点击功能中吗？你有没有这样做的原因？

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

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

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

这样做的好处就在于动画结束，所以如果您决定改变淡出时间，则无需改变淡出时间。

另请参阅：Jquery - defer callback until multiple animations are complete

jquery如何仅在单击事件后触发调用

4 个答案: