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


这里也是代码的实时模拟：http: //nealfletcher.co.uk/fish/test2/
所以#slide-02是隐藏的，当点击#button时#slide-02淡入，字母's'和'b'淡出#slide-02但我只希望这些字母在可见#slide-02时开始褪色，并且在页面加载时不开始褪色，因为目前如果您不立即单击按钮，字母已经褪色。
有没有办法只在点击功能实现后才实现这个调用？
然后我将一张接一张地添加更多幻灯片，所以如果可能的话，我希望这个电话可以多次工作？

4

4 回答 4

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

    //lets bring it all back
    setTimeout(function () {
        $('#slide-02').find('.hideMe').css('opacity', 0);
    }, 5000);
});
于 2012-12-05T22:11:24.763 回答
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/

于 2012-12-05T22:12:08.800 回答
1

您可以实现与更复杂的动画链交互的承诺。

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

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

另请参阅：Jquery - 延迟回调直到多个动画完成

于 2012-12-05T22:15:21.967 回答