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＆＃39; s .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

不要分配＆＃34; jumpToEnd＆＃34; ＆＃34;停止＆＃34;的参数。这似乎导致过渡问题。

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

    fade.stop(true);

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

包括JQuery Fade Out

3 个答案: