JQuery 出现 .addClass 和 CSS 过渡

Question

我想了解特定的JQuery效果是如何实现的。在这家设计公司的网站上，当您到达"关于我们"和"团队"部分时，平板电脑和人物的图片会"弹出"。如何重现效果？

我试图从页面复制粘贴 jquery 代码，但无法让它正常工作。有人可以告诉我我错过了什么吗？

jQuery('.animated').appear();
jQuery(document.body).on('appear', '.slide', function () {
    jQuery(this).each(function () {
        jQuery(this).addClass('ae-animation-slide')
    });
});

这是完整的代码JSFiddle

Answer 1

首先，似乎没有 DOM 还没有准备好。使用 $(document).ready() 告诉 JQuery 等到页面加载完成才能运行 JavaScript：

$(document).ready(function () {
    //put codes in here.
})

我尝试了您的JSFiddle，

但它似乎没有显示图像，如果您更新JSFiddle，我可以再次查看。

试试这个更新的小提琴

http://jsfiddle.net/RcvWM/3/

我添加了webkit css并加载了jQuery Appear插件。确保你已经包括在内。

.ae-animation-slide {
    -webkit-animation-name: ae-animation-slide;
    // etc
}