当元素出现在屏幕上时触发jquery事件

一旦元素出现在屏幕上,我想要显示淡入淡出效果。 在这个元素之前有很多内容,所以如果我触发document.ready的效果,在某些分辨率下,这些效果器不会看到它。

在向下滚动后,元素变得可见时,是否可以触发事件? 我几乎可以确定我以前曾见过这种效果,但不知道如何实现它。

谢谢!


jQuery Waypoint插件可能会有用。 它提供了一种在元素在屏幕上可见时触发动作的方法。

例如:

$('.entry').waypoint(function() {
   alert('The element has appeared on the screen.');
});

插件网站上有一些例子。


这个对我和其他人在这篇文章中更好:http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/

用法很简单:

$('#element').visible()

你可以在这里看到这个插件是如何用来创建你的效果的:

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

function viewable() {
    $(".module").each(function(i, el) {
        var el = $(el);
        if (el.visible(true)) {
            el.addClass("come-in");
        });
    }
$(window).scroll(function() {
    viewable();
});
$(window).blur(function() {
    viewable();
});

如果你使用标签。 (例如jQuery UI选项卡),您必须检查选项卡是否处于活动状态。

$(window).scroll(function() {
    if($('#tab-1').hasClass('active')) {
        viewable();
    }
});

Jquery.appear插件是解决这个问题的最好方法。

演示。

链接地址: http://www.djcxy.com/p/83383.html

上一篇: Triggering jquery event when an element appears on screen

下一篇: jQuery when element becomes visible