jQuery类似苹果的图像淡入效果

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/