Question

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

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

谢谢！

Answer 1

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

例如：

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

the site of the plugin上有一些例子。

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 plugin是解决此问题的最佳方式。

demo

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!');
});

Answer 5

快速搜索为jQuery提供了这个viewport扩展，它允许您检查元素在视口中的可见性。如果您的元素不在视口中，请不要执行淡入动画。

Answer 6

我认为你指的是jQuery插件“Lazy Load”：http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

从查看源代码看，插件看起来像这样：

$('#item').one('appear', function () {
    // Do stuff here
});

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

6 个答案: