1

我找到了窗口滚动功能的代码并将其附加到我的代码中之前的效果。

所以请帮我解决这个问题。

HTML部分：-

<div id="blog">
<img src="trans_blog.png">//i want this image to fade in and out.
</div>

jQuery部分：-

$(document).ready(function(){
    $("#blog img").fadeIn(2000);
    $(window).scroll(function(){
    $("#blog img").fadeOut("slow");
    });
});
4

3 回答 3

1

这段代码应该可以解决问题。当它离开视野时它会淡出元素，当它回来时会淡入淡出

$(window).scroll( function(){
    $('#blog img').each( function(i){
        var top_of_window = $(window).scrollTop();
        var this_bottom = $(this).position().top + $(this).height();
        if(top_of_window > this_bottom){
            $(this).fadeOut();
            } else {
                $(this).fadeIn();
                }

    });
于 2013-10-06T19:43:18.180 回答
0

您需要将fadeIn 和fadeOut 都放在.scroll 函数中，并确定滚动的方向以执行其中一个或另一个。

这篇文章将帮助您实现这一点 -如何确定 jQuery 滚动事件的方向？

于 2013-10-06T19:34:04.610 回答
-1

jQuery Waypoints 插件可能是您需要的：http: //imakewebthings.com/jquery-waypoints/

于 2013-10-06T19:32:22.213 回答