当前位置：文江博客话题详情

当用户滚动到该 div 时，JQuery 淡入该 div

发布于 2024-10-23 22:20:37 字数 232 浏览 1 评论 0原文

当用户向下滚动到该 div 时，元素

将淡入。

我找到了一个使用 jQuery 插件的解决方案和另一个检查 div 在页面上是否可见的解决方案。有用。

但是，一旦用户滚动到 div 顶部，它就会很快淡入，因此用户看不到 div 淡入。如何使 div 仅在用户滚动到底部时淡入div 以便用户可以看到整个 div 的淡入效果？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

成熟稳重的好男人 2024-10-30 22:20:37

此 JavaScript 代码可能与您当前使用的代码类似，唯一的区别是使用的偏移量，即目标元素的 offset().top() + 元素的 height()< /代码>。当元素底部进入视图时，演示代码在多个

元素中淡出。

tiles = $("ul#tiles li").fadeTo(0,0);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

演示： jsfiddle.net/Marcel/BP6rq (全屏）

This javascript code is possibly similar to what you currently use, the only difference being the offset used, which is simply the target element's offset().top() + the element's height(). The demo code fades in several <li> elements as the bottom of the elements come into view.

tiles = $("ul#tiles li").fadeTo(0,0);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

Demo: jsfiddle.net/Marcel/BP6rq (fullscreen)

回复收藏 0 原文

以酷 2024-10-30 22:20:37

你提到你使用了 jQuery 插件，我不知道你是否尝试过 jQuery waypoints插件，您可以通过将偏移选项传递给插件来轻松使用此插件，如下所示：

// by default your element will be hidden
$('div').hide();
// call waypoint plugin
$('div').waypoint(function(event, direction) {
    // do your fade in here
    $(this).fadeIn();
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});

offset ：确定元素顶部必须距浏览器窗口顶部多远才能触发航路点。它可以是一个数字（以像素数表示）、表示视口高度百分比的字符串或返回像素数的函数。

因此在前面的示例中，除非您的 div 位于页面中间，否则它不会淡入。

you mentioned that you used a jQuery plugin, i don't know if you have tried jQuery waypoints plugin, you can do it using this plugin easily by passing an offset option to the plugin as follows:

// by default your element will be hidden
$('div').hide();
// call waypoint plugin
$('div').waypoint(function(event, direction) {
    // do your fade in here
    $(this).fadeIn();
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});

offset : Determines how far the top of the element must be from the top of the browser window to trigger a waypoint. It can be a number, which is taken as a number of pixels, a string representing a percentage of the viewport height, or a function that will return a number of pixels.

so on the previous example, your div won't fade in unless it's in the middle of the page.

回复收藏 0 原文

~没有更多了~