javascript - 包括 JQuery 淡出

Question

我已经在某个 DIV 上创建了一个效果很好的淡入效果，但我也想在同一个 DIV 上创建一个淡出效果。我尝试了几个不同的选项，但它们会破坏功能或根本不起作用。我会在下面发布它们。我当前使用淡入淡出的脚本在 JSFiddle 中:https://jsfiddle.net/6oy1ry4f/5/

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();
    $('.fadeinblock').css({
        'opacity': ((height - scrollTop) / height)
    });
});

没有运气的完全淡入/淡出:

$(window).scroll(function(){
   if($(window).scrollTop()<20){
         $('.fadeinblock').stop(true,true).fadeIn("slow");
   } else {
         $('.fadeinblock').stop(true,true).fadeOut("slow");
   }
});

任何帮助将不胜感激。

Answer 1

试试 jquery 的 .fadeToggle()。

$(window).on('scroll', function() {
  $('.fadeinblock').fadeToggle('slow', 'linear'); // it takes a bunch of other options if you don't like those.
});