Question

我想了解如何实现特定的JQuery效果。在this design company's website上，当您到达“关于我们”和“团队”部分时，平板电脑和人物的图片会“弹出”。如何重新创建效果？

我尝试从页面复制粘贴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
}

JQuery出现.addClass和CSS Transition？

1 个答案: