jQuery Apple-like图像淡入效果

Question

当你转到http://www.apple.com/mac/时，你会看到上面的产品已经淡入页面并产生某种效果。有没有一个jQuery插件可以做类似淡入的类似的东西？

Answer 1

这是一个类似的小提琴：http://jsfiddle.net/33sN4/1/

你真的不需要一个插件，虽然我确定那里有一个插件......

你只需要遍历对象并延迟fadeIn（或幻灯片，或动画......你选择的任何效果）：

$(function(){   

    $('.region').each(function(index){
        $(this).delay(index*1000).fadeIn(500);
    });

});​

Answer 2

jQuery包含产生类似效果的方法。您可以使用.fadeIn（secs）和.fadeOut（secs）来执行您需要的操作。您还可以使用.anmiate（）来动画CSS属性。有关jQuery功能的完整描述，请查看jQuery Effects文档：

documentation link

要查看一些展示fadeIn / fadeOut幻灯片效果的插件，请查看

plugin demos

Answer 3

您不需要jQuery的插件。

您可以使用delay()，animate()和css()来获得所需的结果。您甚至可以调整时间来改变您喜欢的效果。

例如

$('#mac').css({
    left: 0,
    opacity: 0
}).delay(500).animate({
    left: 50,
    opacity: 1,
    queue: false
}, 'fast');

工作示例，点击图片查看：http://jsfiddle.net/cfgyhdou/