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

Question

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

当向下滚动元素变得可见时,是否可以触发事件？我几乎肯定我以前见过这种效果,但不知道如何实现它.

谢谢!

Answer 1

jQuery Waypoints插件可能很有用.它提供了一种在元素在屏幕上可见时触发操作的方法.

例如:

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

插件的网站上有一些例子.

Answer 2

这篇文章对我来说比其他人更好: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();
    }
});

Answer 3

Jquery.appear插件是解决此问题的最佳方法.

演示.

Answer 4

如果您想要一个简单且有效的解决方案：

function elementInView(elem){
  return $(window).scrollTop() < $(elem).offset().top + $(elem).height() ;
};

$(window).scroll(function(){
  if (elementInView($('#your-element')))
  //fire at will!
    console.log('there it is, wooooohooooo!');
});