当元素出现在屏幕上时触发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