Question

我想要做的是淡化一个元素，然后让元素看起来通过上下褪色不透明来发光，我想这样做大约5秒，然后一旦完成，我想要淡出元素...

我无法弄清楚我的生活是怎么做到的。到目前为止，这是我的代码：

function showContent() { $('.item').fadeIn(3000);
$('.item').animate({opacity:'+=1'}, 1000);
$('.item').animate({opacity:'-=0.4'}, 1000);
};

现在它只是不断闪烁我希望在5秒后停止它然后淡出它。

任何帮助都会很棒！

Answer 1

不要担心回调，你可以使用jQuery动画队列。

$('.item')
   .fadeIn(3000)
   .delay(100)
   .fadeTo(1000, 0.4)
   .delay(100)
   .fadeTo(1000,1)
   .delay(100)
   .fadeOut(3000);

演示：http://jsfiddle.net/ZvSXt/1/

Answer 2

我为您http://jsfiddle.net/alsadi/MUvqb/

制作了一个在线代码演示程序

一般情况下，在设置动画之前为div设置合理的css（例如，不透明度：1.0）然后淡入淡出并使用不透明度（我不知道+ = - =我只使用1.0表示100％和0.40表示40％..等等。）

$(document).ready(function(){
    $('#box').fadeIn(3000);
    $('#box').animate({opacity:1.0}, 1000);
    $('#box').animate({opacity:0.5}, 1000);
    $('#box').fadeOut(3000);
});

当然和所有jquery一样，你可以链接电话

$(document).ready(function(){
    $('#box').fadeIn(3000).animate({opacity:1.0}, 1000).animate({opacity:0.5}, 1000).fadeOut(3000);
});

Answer 3

您需要初始化完成第一个动画的第二个动画，第三个动画完成相同。

所以使用完整的回调来初始化下一个动画。

function showContent() { 
    $('.item').fadeIn(3000, function(){
        console.log('2')
        $(this).animate({opacity:'+=1'}, 1000, function(){
            console.log('3')
            $(this).animate({opacity:'-=0.4'}, 1000);
        });
    });
};

演示：Fiddle

我怎么能动画5秒，然后fadeOut（）jquery

3 个答案: