jQuery fadeOut несколько div один за другим, затем fadeIn все одновременно - PullRequest
Новая
       22

jQuery fadeOut несколько div один за другим, затем fadeIn все одновременно

0 голосов
/ 09 декабря 2018 

$(document).ready(function(){
  $('#divBTN').click(function(){
    $("#div1").fadeOut(1000);
    $("#div2").fadeOut(2000);
    $("#div3").fadeOut(3000);
    $('#div1,#div2,#div3').fadeIn(4000);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="div1" style="width:70px; height:30px; background-color: green;"></div>
<br>
<div id="div2"  style="width:70px; height:30px; background-color: green;"></div>
<br>
<div id="div3" style="width:70px; height:30px; background-color: green;"></div>
<br>
<button id="divBTN">Click Me!</button>

Как вы можете видеть, div постепенно исчезает один за другим, что и ожидается, но когда я пытаюсь скрыть их все вв то же время он исчезает один за другим, что неправильно.Я хочу, чтобы они все исчезли одновременно.

Может кто-нибудь помочь мне ??

Ответы [ 3 ]

0 голосов
/ 09 декабря 2018

На самом деле, вы запускаете fading-out все элементы одновременно, но с разными скоростями анимации.Если вы хотите затемнять их один за другим, используя одну и ту же скорость анимации, вам придется подождать, пока не закончится каждый fade-out, прежде чем вызывать fadeOut() для другого.В следующем примере я покажу, как обобщить (до X чисел последовательных элементов) эту анимацию, используя рекурсивную процедуру. 

$(document).ready(function()
{
    var fadeOutSpeed = 2000;
    var fadeInSpeed = 3000;

    var seqFadeOutThenFadeAllIn = function(elem)
    {
        // Check if exists a next element.

        if (!elem.length)
        {
            // Fade-in all elements.
            $(".custom-div").fadeIn(fadeInSpeed);
        }
        else
        {
            // Fade-out next element.
            elem.fadeOut(fadeOutSpeed, function()
            {
                seqFadeOutThenFadeAllIn(elem.next(".custom-div"));
            });
        }
    }

    $('#divBTN').click(function()
    {
        // Start fading-out the first element in the set.
        seqFadeOutThenFadeAllIn($(".custom-div").first());
    });
});
.custom-div {
    width: 70px;
    height: 30px;
    margin-bottom: 20px;
    background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="div1" class="custom-div"></div>
<div id="div2" class="custom-div"></div>
<div id="div3" class="custom-div"></div>

<button id="divBTN">Click Me!</button>
0 голосов
/ 09 декабря 2018

Как предложил Мухаммед, вы можете использовать подход ожидания одного, чтобы завершить действие, а затем запустить команду для следующего.

В следующем примере они будут скрываться один за другим, и все они будут скрыты.показать их все: 

$('#divBTN').click(function(){
    $("#div1").fadeOut(1000, function(){
        $("#div2").fadeOut(1000, function(){
            $("#div3").fadeOut(1000, function(){
                $('#div1,#div2,#div3').fadeIn(1000);
            });
        });
    });
});
0 голосов
/ 09 декабря 2018

Вам нужно дождаться окончания fadeOut и затем элементов fadeIn.Так что используйте complete функцию fadeOut(), которая вызывается, когда исчезает конец, и элементы fadeIn в ней. 

$('#divBTN').click(function(){
  $("#div1").fadeOut(1000);
  $("#div2").fadeOut(2000);
  $("#div3").fadeOut(3000, function(){
    $('#div1,#div2,#div3').fadeIn(4000);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" style="width:70px; height:30px; background-color: green;"></div><br>
<div id="div2"  style="width:70px; height:30px; background-color: green;"></div><br>
<div id="div3" style="width:70px; height:30px; background-color: green;"></div><br>
<button id="divBTN">Click Me!</button>
...