JQuery анимации после удаления элементов

Question

У меня есть следующие HTML и CSS:

<div id="categories"> 
     <h3 id="sports">Sports</h3> 

     <h3 id="videogames">Video Games</h3> 

     <h3 id="music">Music</h3> 

     <h3 id="web">Web</h3> 
</div> 

#categories { 
    left: 50%; 
    top: 50%; 
    position: absolute; 
    -webkit-transform: translate3d(-50%, -50%, 0); 
    -moz-transform: translate3d(-50%, -50%, 0); 
    transform: translate3d(-50%, -50%, 0); 
} 

#categories > h3 { 
    display: inline; 
} 

В h3 элементы, отображающие инлайн и сосредоточенные. У меня есть следующий код в jQuery, который, когда вы нажимаете элемент h3, остальные элементы исчезают. Он отлично работает, чтобы удалить элементы, но как только они исчезнут, выбранный элемент просто внезапно вспыхнет в центре (где я хочу его), но есть ли способ его оживить? Сделать переход более плавным?

$("#categories h3").click(function(){ 
    if(this.id == "sports"){ 
     $("#videogames").fadeOut(500); 
     $("#music").fadeOut(500); 
     $("#web").fadeOut(500); 
    } 
}) 

Answer 1

Использование переходов, намного лучше.

$("#categories h3").click(function(){ 
 
    if(this.id == "sports"){ 
 
     $("#videogames, #music, #web").css({opacity: 0}); 
 
    } 
 
});

#categories { 
 
    left: 50%; 
 
    top: 50%; 
 
    position: absolute; 
 
    -webkit-transform: translate3d(-50%, -50%, 0); 
 
    -moz-transform: translate3d(-50%, -50%, 0); 
 
    transform: translate3d(-50%, -50%, 0); 
 
} 
 

 
#categories > h3 { 
 
    display: inline; 
 
    transition: opacity .3s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="categories"> 
 
     <h3 id="sports">Sports</h3> 
 

 
     <h3 id="videogames">Video Games</h3> 
 

 
     <h3 id="music">Music</h3> 
 

 
     <h3 id="web">Web</h3> 
 
</div>

Answer 2

Может быть, вы можете использовать это. исправьте меня, если я ошибочно понял.

if(this.id == "sports"){ 
    $("#videogames").fadeOut(500); 
    $("#music").fadeOut(500); 
    $("#web").fadeOut(500); 
    $("#sports").fadeOut(500); 
    $("#sports").fadeIn(500); 
    } 

Answer 3

Попробуйте следующее:

$("#categories h3").on('click', function(){ 
    if(this.id == "sports"){ 
     $("#videogames").fadeOut(500, function(){ 
      $("#music").fadeOut(400, function(){ 
       $("#web").fadeOut(300, function(){ 
        $("#sports").fadeIn(400); 
       }); 
      }); 
     }); 
    } 
}); 

Функция обратного вызова вызывается после того, как первая анимация завершена. Вы можете вложить функции для анимации последовательности.

Update:

Вот лучшие примеры для построения цепочки анимации: Chaining jQuery animations that affect different elements

Answer 4

Чтобы ответить на ваш вопрос плавно переходит выбранный элемент в центре попробовать следующий код.

Основная проблема заключается в том, что метод .fadeOut() активирует непрозрачность согласованных элементов. Когда непрозрачность достигает 0, свойство стиля отображения имеет значение none, поэтому элемент больше не влияет на макет страницы «. Итак, оставшийся выбранный элемент прыгает в центр. И вы не можете перейти к отображению: none. Поэтому вам нужно найти свойство, которое вы можете оживить, например «левое», которое я использовал здесь.

[В стороне есть некоторый дополнительный код, потому что я тестировал возможность анимации flex «order», но в данный момент он не работает на Edge и не проверен в других браузерах. Вам не нужны свойства заказа.]

Надеюсь, это поможет.

$("#categories h3").click(function() { 
 

 
    var thisID = this.id; 
 

 
    $.each($("#categories h3"), function (index, val) { 
 

 
     if (thisID == val.id) { 
 

 
      var containerWidth = $("#categories").width(); 
 
      var thisWidth = val.getBoundingClientRect().width; 
 
      var thisComputedLeft = val.getBoundingClientRect().left; 
 
     
 
      var adjustLeft = (containerWidth/2) - thisComputedLeft - (thisWidth/2); 
 

 
      // to center the clicked element 
 
      $(this).css({ left: adjustLeft }); 
 

 
     } 
 
     else $(val).css({opacity: 0}); 
 
    }); 
 
});

#categories { 
 
    position: relative; 
 

 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-flow: row nowrap; 
 
     -ms-flex-flow: row nowrap; 
 
      flex-flow: row nowrap; 
 
    justify-content: space-around; 
 
    align-content: center; 
 

 
    width: 100%; 
 
    height: 100%; 
 
    //margin: 0 auto; 
 
} 
 

 
#categories > h3 { 
 
    cursor: pointer; 
 
    position: relative; 
 
    left: 0; 
 
    width: auto; 
 

 
    transition: all 0.5s ease, opacity 0.3s; 
 
    // transition: opacity 0.3s; 
 
} 
 

 
#sports  { order: 1; } 
 
#videogames { order: 2; } 
 
#music  { order: 3; } 
 
#web  { order: 4; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="categories"> 
 
     <h3 id="sports">Sports</h3> 
 

 
     <h3 id="videogames">Video Games</h3> 
 

 
     <h3 id="music">Music</h3> 
 

 
     <h3 id="web">Web</h3> 
 
</div>