jQuery

Question

那是我的代码Plunker

基本上是几个带动画的选项卡之间的简单分页。当我单击 "next" 并移至第二页时 - 一切正常。

第二页后问题开始出现，我需要等待大约 30-40 秒才能开始显示消失的标签动画。只需单击，它就会被标签弄乱，然后等待大约一分钟，您就会明白我的意思。

下一页的出现有效，即使其在上一页消失后应该执行的函数中...

示例代码：

HTML:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div>
      <article class="employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <div class="more_staff">
        more
      </div>
      <div class="less_staff">
        less
      </div>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <div class="more_staff">
        more
      </div>
      <div class="less_staff">
        less
      </div>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <div class="more_staff">
        more
      </div>
      <div class="less_staff">
        less
      </div>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
      <article class=" employee-article">
      </article>
    </div>
  </body>

</html>

CSS:

article, div.more_staff, div.less_staff {
  display: block;
  height: 100px;
  width: 100px;
  float: left;
  background-color: #dddddd;
  margin: 10px;
}
article:nth-child(n+10), div.more_staff:nth-child(n+10), div.less_staff:nth-child(n+10) {
  display: none;
  opacity: 0;
}

JS:

$(function() {
  $( ".more_staff" ).click(function() {
    that = $(this);
    nextBreakpoint = that.nextAll( ".more_staff" ).first().next();

    that.siblings().add( that ).not( "footer" ).animate({opacity: "0.0"}, 1000, function() {
      console.log("start");
      $( this ).css("display", "none");
      that.nextUntil( nextBreakpoint ).css("display", "block");
      that.nextUntil( nextBreakpoint ).animate({opacity: "1.0"}, 1000);
    });
  });
});

Answer 1

改成fadeIn,fadeOut了，还是不知道为什么不正常

$( ".more_staff" ).click(function() {
                that = $(this);
                nextBreakpoint = that.nextAll( ".more_staff" ).first().next();
                prevBreakpoint = that.prevAll( ".more_staff" ).first();

                that.prevUntil( prevBreakpoint ).add( that ).not( "footer" ).fadeOut(1000, function() {
                    console.log("start");
                    $( this ).css("display", "none");
                    that.nextUntil( nextBreakpoint ).fadeIn(1000);
                });
            });

jQuery - 启动动画大约需要 40 秒。为什么？

jQuery - it takes about 40 second to launch animation. Why?

javascript

jquery-animate