Изменить свойство AFTER animate() завершено

Question

Я пытаюсь взять текст «Эй, я матовый». и отскочите его от страницы, а затем измените его на «Matt lastName», когда он невидим, а затем отскочите назад в другом месте после изменения.

JQuery

$('#about').click(function() { 
    $('a#name').animate({'left' : '52%'}); 
    $('a#name').animate({'left' : '-53%'}); 
    /*$('a#name').animate({'text' : 'Matt lastName'}); -- doesnt work */ 
    $('a#name').animate({'top': '60px' }); 
    $('a#name').animate({'left' : '20px'}); 
    $('a#name').animate({'left' : '-=10px'}); 

    }); 

Если я использую ("имя #") CSS ("текст", "Мэтт LastName"). текст меняет право, когда я делаю свой клик. Есть ли способ, чтобы .cc ожидал завершения предыдущих вызовов анимации до запуска?

Answer 1

Привет, если вам нужно знать, когда .animate полное использование этого синтаксиса

$('a#name').animate({'left' : '52%'}, function() { 
// Animation complete. 
}); 

или если вы хотите установить длительность

$('a#name').animate({'left' : '52%'}, duration, function() { 
// Animation complete. 
}); 

Answer 2

Вам нужно изменить текст, когда элемент находится вне видовой экран. Для этого использует полный обратный вызов метода $.fn.animate:

$('#about').click(function() { 
 
    $('a#name') 
 
    .animate({left: '52%'}) 
 
    .animate({left: '-53%'}, function() { 
 
     $(this).text('Matt lastName'); 
 
    }) 
 
    .animate({top: '60px', left: '20px'}) 
 
    .animate({left: '-=10px'}); 
 
});

#name { 
 
    position: absolute; 
 
    top: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="about">About</button> 
 
<a id="name">Hey, I'm matt.</a>

Это также лучше цепи animate методов, так что вы не DOM для повторного запроса a#name элемента, немного повышения производительности.