Question

我尝试fadeOut包含图片的DIV，然后将DIV切换到display:none，以便点击DIV下的链接。

我这样做，因为我希望图片贴在页面的左下角。

我有：

<script>
jQuery(function( $ ){


    function fade_home_top() {
        if ( $(window).width() > 800 ) {
        window_scroll = $(this).scrollTop();
            $(".mom-son").css({
                  'opacity' : 1-(window_scroll/300)
            });
        }
    }
    $(window).scroll(function() { fade_home_top(); });

});
</script>

理想情况是滚动时的DIV（因此图像）fadeOut，然后是display:none

我正在使用ScrollTo.js。

这里是JSFiddle

Answer 1

jQuery(function( $ ){
    function fade_home_top() {
        if ( $(window).width() > 800 ) {
            var window_scroll = $(this).scrollTop();
            $(".mom-son").css({opacity:1-window_scroll/300});
            if(1-window_scroll/300 <= 0){
                $(".mom-son").css({display:'none'});
            }
            else
            {
                $(".mom-son").css({display:'block'});
            }
        }
    }
    $(window).scroll(fade_home_top);
});

基本上，添加一项检查以查看不透明度是否小于或等于零。如果是，则将display设置为none。否则，显示块。应声明window_scroll。另外，传递对函数的引用。无需调用只调用其他函数的匿名函数。

http://jsfiddle.net/PWLR8/5/

Answer 2

您可以使用jquery fadeOut函数。请查看fiddle并告诉我们。

代码段：

function fade_home_top() {
    if ( $(window).width() > 800 ) {
    window_scroll = $(this).scrollTop();
        if(1-window_scroll/300){
             $(".mom-son").fadeOut();
        }
    }
}

为了检查增加输出窗口宽度，因为我们已设置窗口宽度＆gt; 800检查

更新的答案（根据Kai的建议）

我现在为else部分添加了fadeIn（）以重新启用元素。

Updated Fiddle

更新代码：

function fade_home_top() {
        if ( $(window).width() > 800 ) {
        window_scroll = $(this).scrollTop();
            if (window_scroll >= ($(document).height() - $(window).height()) || window_scroll ==0){
                $(".mom-son").fadeIn();
            }
            else {
                 $(".mom-son").fadeOut();
            }
        }
    }

jquery scrollto淡出然后显示：无

2 个答案: