包含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. 
}); 

Answer 2

对于转换，您可以使用css转换。

关于淡入的条件输入/输出，你可以这样做：

$('.one').css({ 
    opacity: $(window).scrollTop() > 20 ? 100 : 0 
}); 

而且一个活生生的例子：

$(window).scroll(function(){ 
 
    $('.one').css({ 
 
    opacity: $(window).scrollTop() > 20 ? 100 : 0 
 
    }); 
 
});

.one { 
 
    opacity: 0; 
 
    transition: opacity .5s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide2"> 
 
    <div class="content"> 
 
    <h2>Header</h2> 
 
    <div class="quotes_container"> 
 
     <div class="fadeinblock"> 
 
     <div class="one"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium non enim et ornare. Duis volutpat lacus dui, sed blandit dui hendrerit vel. Fusce sodales augue sed ornare venenatis. Cras sit amet neque placerat, sagittis turpis ac, interdum 
 
      sem. Maecenas scelerisque, eros et congue dapibus, enim nisl dapibus felis, a fringilla mi turpis ut turpis. Nulla tincidunt, nulla a interdum dictum, nulla magna ultricies sem, vel accumsan arcu enim vitae augue. Integer lobortis nunc in 
 
      massa commodo imperdiet. Aliquam dignissim mauris a tortor sollicitudin, et rhoncus purus laoreet. Maecenas convallis velit justo, eget semper eros volutpat a.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium non enim et ornare. Duis volutpat lacus dui, sed blandit dui hendrerit vel. Fusce sodales augue sed ornare venenatis. Cras sit amet neque placerat, sagittis turpis ac, interdum 
 
      sem. Maecenas scelerisque, eros et congue dapibus, enim nisl dapibus felis, a fringilla mi turpis ut turpis. Nulla tincidunt, nulla a interdum dictum, nulla magna ultricies sem, vel accumsan arcu enim vitae augue. Integer lobortis nunc in 
 
      massa commodo imperdiet. Aliquam dignissim mauris a tortor sollicitudin, et rhoncus purus laoreet. Maecenas convallis velit justo, eget semper eros volutpat a.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium non enim et ornare. Duis volutpat lacus dui, sed blandit dui hendrerit vel. Fusce sodales augue sed ornare venenatis. Cras sit amet neque placerat, sagittis turpis ac, interdum 
 
      sem. Maecenas scelerisque, eros et congue dapibus, enim nisl dapibus felis, a fringilla mi turpis ut turpis. Nulla tincidunt, nulla a interdum dictum, nulla magna ultricies sem, vel accumsan arcu enim vitae augue. Integer lobortis nunc in 
 
      massa commodo imperdiet. Aliquam dignissim mauris a tortor sollicitudin, et rhoncus purus laoreet. Maecenas convallis velit justo, eget semper eros volutpat a.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium non enim et ornare. Duis volutpat lacus dui, sed blandit dui hendrerit vel. Fusce sodales augue sed ornare venenatis. Cras sit amet neque placerat, sagittis turpis ac, interdum 
 
      sem. Maecenas scelerisque, eros et congue dapibus, enim nisl dapibus felis, a fringilla mi turpis ut turpis. Nulla tincidunt, nulla a interdum dictum, nulla magna ultricies sem, vel accumsan arcu enim vitae augue. Integer lobortis nunc in 
 
      massa commodo imperdiet. Aliquam dignissim mauris a tortor sollicitudin, et rhoncus purus laoreet. Maecenas convallis velit justo, eget semper eros volutpat a.</p> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium non enim et ornare. Duis volutpat lacus dui, sed blandit dui hendrerit vel. Fusce sodales augue sed ornare venenatis. Cras sit amet neque placerat, sagittis turpis ac, interdum sem. Maecenas 
 
      scelerisque, eros et congue dapibus, enim nisl dapibus felis, a fringilla mi turpis ut turpis. Nulla tincidunt, nulla a interdum dictum, nulla magna ultricies sem, vel accumsan arcu enim vitae augue. Integer lobortis nunc in massa commodo 
 
      imperdiet. Aliquam dignissim mauris a tortor sollicitudin, et rhoncus purus laoreet. Maecenas convallis velit justo, eget semper eros volutpat a. 
 
      </p> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

只是不分配 “jumpToEnd” “停止”参数。这似乎是导致过渡问题。

$(window).scroll(function() { 
    var fade = $(".fadeinblock"); 

    fade.stop(true); 

    if($(window).scrollTop() < 20) { 
     fade.fadeIn("slow"); 
    } else { 
     fade.fadeOut("slow"); 
    } 
});