Непрозрачность бесконечной анимации не работает для нескольких элементов - PullRequest
Новая
       17

Непрозрачность бесконечной анимации не работает для нескольких элементов

0 голосов
/ 10 марта 2019

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"), тогда это работает правильно, хотя при попытке анимировать все 3 элемента, используя $(".all_divs"), анимация падает.

В чем причина этого?

Вот пример, когда селектор имеет класс .all_divs и анимация падает:

https://jsfiddle.net/oL65jax0/

И это ожидаемый результат:

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

1 Ответ

0 голосов
/ 10 марта 2019

Это происходит потому, что ваш обратный вызов "on animation end" вызывает 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>
...