JQuery 淡出、加载和淡入

Question

我有以下淡出、加载另一个内容和淡入的代码，但我遇到了一个问题，有时，当加载功能非常快时，它甚至在时间线之前完全切换加载的内容fadeOut，所以在这种情况下效果有点奇怪。我怎样才能防止这种情况发生？

备注我想在点击后立即加载内容，所以将加载函数放在第一个 fadeTo 回调函数中不是解决方案。谢谢！

$(".switches li").click(function(evn) {
        $(".switches li").removeClass("active");
        $(evn.target).addClass("active");
        $(".timeline").fadeTo(400, 0, function(){
           $(this).css("visibility", "hidden");
        }); 
        $(".timeline").load("inc-timeline/"+evn.target.id+".html", function() {
            $(this).fadeTo(400, 100, function() {
                $(this).css("visibility", "visible");
                if(evn.target.id === "data-girls") {
                    $(".data-girls-powered").fadeIn(400);
                } else {
                    $(".data-girls-powered").fadeOut(400);
                }
            });
        });  
    });

Answer 1

使用 .animate()、.finish()

的 start 选项

  // call `.load()` when `.fadeTo(400, 0)` starts 
  $(".timeline").finish().animate({opacity:0},{
    start: function() {
      // do asynchronous stuff; e.g., `.load()`
      $(this).load("inc-timeline/"+evn.target.id+".html", function() {
        // stop `.fadeTo(400, 0)` animation,
        // start animating to `opacity:1`
        $(this).finish().fadeTo(400, 1, function() {
          // do stuff
        });
      });
    },
    duration: 400        
  });

$("button").click(function() {
  // call `.load()` when `.fadeTo(400, 0)` starts 
  $(".timeline").finish().animate({opacity:0},{
    start: function() {
      var el = $(this);
      // do asynchronous stuff; e.g., `.load()`
      $.Deferred(function(dfd) {
        setTimeout(function() {
          dfd.resolveWith(el)
        }, Math.floor(Math.random() * 3500))
      }).promise().then(function() {
        // stop `.fadeTo(400, 0)` animation,
        // start animating to `opacity:1`
        $(this).finish().fadeTo(400, 1, function() {
        });
      });
    },
    duration: 400        
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="timeline">abc</div>

Answer 2

如何更改加载持续时间..使其超过 400 毫秒，这有帮助吗？

JQuery 淡出、加载和淡入

JQuery FadeOut, Load and FadeIn

javascript

jquery

fadeout

fadein

jquery-effects