Triggering jquery event when an element appears on screen

I want to show a fade effect as soon as the element appears on screen. There is a lot of content before this element so if I trigger the efect on document.ready, at certain resolutions the vistors wont´t see it.

Is it possible to trigger an event when, after scrolling down, the element becomes visible? I am almost sure I have seen this effect before, but have no idea how to achieve it.

Thank you!

---

jQuery Waypoints plugin could be useful. It provides a way to trigger an action when an element becomes visible on the screen.

For instance:

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

There are some examples on the site of the plugin.

---

This one works better for me then the others in this post: http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/

Usage is simple:

$('#element').visible()

You can see how this plugin is used to create your effect here:

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();
});

If u use tabs. (for example jQuery UI tabs) you must check if tab is active.

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

---

Jquery.appear plugin is the best way to solve this problem.

demo.

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

上一篇: jQuery的事件处理程序：div变得可见/隐藏

下一篇: 当元素出现在屏幕上时触发jquery事件