Question

HTML：

<div id="my_div" class="all_divs"></div>
<div class="all_divs"></div>
<div class="all_divs"></div>

CSS：

.all_divs {
   width: 100px;
   height: 100px;
   background: #009;
   margin-top: 10px;
   opacity: 0;
}

JS / JQUERY：

function light() {
    $("#my_div").animate({opacity: 1}, 500, function() {
        shutdown();
    });
}

function shutdown() {
    $("#my_div").animate({opacity: 0}, 500, function() {
        light();
    });
}

$(document).ready(function() {
    light();
});

当我尝试仅对一个div（id="my_div"进行动画处理时，这将正常工作，尽管当尝试使用$(".all_divs")对所有3个元素进行动画处理时，动画也会崩溃。

这是什么原因？

这里是一个示例，当选择器是类.all_divs且动画崩溃时：

https://jsfiddle.net/oL65jax0/

这是预期的结果：

https://jsfiddle.net/oL65jax0/1/

Answer 1

之所以会这样，是因为您的“动画结束时”回调为具有light()类的每个元素调用shutdown()和all_divs（每次3次）。解决此问题的一种方法是仅对最后一个元素调用light()和shutdown()。

    function light() {
        $(".all_divs").animate({opacity: 1}, 500, function(i) {
          if (this === $(".all_divs").last().get(0))
            shutdown();
        });
    }
    function shutdown() {
        $(".all_divs").animate({opacity: 0}, 500, function() {
          if (this === $(".all_divs").last().get(0))
            light();
        });
    }


    $(document).ready(function() {
        light();
    });

.all_divs {
  width: 100px;
  height: 100px;
  background: #009;
  margin-top: 10px;
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my_div" class="all_divs"  ></div>
<div class="all_divs"  ></div>
<div class="all_divs" ></div>

或者您可以将最后一个元素保存在某个位置，这样就不必重新计算它。

function light() {
    $(".all_divs").animate({opacity: 1}, 500, function(i) {
      if (this === App.lastAnimatedElement)
        shutdown();
    });
}
function shutdown() {
    $(".all_divs").animate({opacity: 0}, 500, function() {
      if (this === App.lastAnimatedElement)
        light();
    });
}

var App = App || {};

$(document).ready(function() {
  App.lastAnimatedElement = $(".all_divs").last().get(0);
  light();
});

.all_divs {
  width: 100px;
  height: 100px;
  background: #009;
  margin-top: 10px;
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my_div" class="all_divs"  ></div>
<div class="all_divs"  ></div>
<div class="all_divs" ></div>

无限的动画不透明度不适用于多个元素

1 个答案: