1

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

我一生都无法弄清楚如何做到这一点。到目前为止，这是我的代码：

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

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

任何帮助都是极好的！

4

3 回答 3

5

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

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

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

于 2013-04-29T08:45:51.237 回答
2

我为您制作了一个在线代码演示http://jsfiddle.net/alsadi/MUvqb/

一般来说，在动画之前为 div 设置健全的 css（例如 opacity: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);
});
于 2013-04-29T08:56:42.340 回答
0

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

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

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

演示：小提琴

于 2013-04-29T08:41:42.703 回答