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