jQuery fadeToggle отображает входящий элемент перед тем, как исходящий скрыт

Question

У меня есть несколько базовых jQuery для переключения текста в кнопке, а также для переключения между двумя div. Проблема в том, что входящий элемент появляется до того, как исчезнет исходящий, а затем входящий перемещается вверх в конце анимации. Это выглядит как-то вяло. Вот моя скрипка .

Для потомков вот мой HTML:

<button id='globalTicketsBtn'>Show Table</button>
<div class="toggle" id="globalTicketsByHour">This is where the chart will be</div>   
<div class="toggle" style="display: none">This is where the table will be</div>

И мой JQuery:

$("#globalTicketsBtn").click(function() {
    $(".toggle").fadeToggle(function() {
        $('#globalTicketsBtn').text($(this).is(':visible')? 'Show Chart' : 'Show Table');
    });
});

Должен ли я запускать анимацию последовательно, а не в одном fadeToggle?

Спасибо за любой совет!

Answer 1

Вместо того, чтобы связываться с обратными вызовами, почему бы не использовать фильтр видимости, чтобы задержать скрытый элемент (ы):

Дайте всем вашим видимым элементам закончить анимацию, прежде чем переключать скрытые:

$("#globalTicketsBtn").click(function() {
    $(".toggle:visible").fadeToggle(1000)
    $(".toggle:hidden").delay(1000).fadeToggle(1000)        
});​

Я попробовал это в твоей скрипке, и нет никакой шаткой.Просто убедитесь, что при изменении интервала задержки интервал составляет >= интервал видимого переключения.

Answer 2

легко :) использовать обратные вызовы.JQuery дает это вам бесплатно.По сути, вы передаете функцию в качестве последнего параметра, которая запускается после анимации.Я должен был сделать быструю манипуляцию с DOM, но кроме этого это довольно просто.

Answer 3

Попробуйте это

$("#globalTicketsBtn").click(function() {
    //alert('jesus!');
    $(".toggle").fadeToggle(function() {
        $('#globalTicketsBtn').hide().text($(this).is(':visible')? 'Show Chart' : 'Show Table').fadeIn(10);
    });
});

Answer 4

Проблема в том, что JavaScript не ждет завершения анимации, прежде чем продолжить. Самое простое (хотя и не очень красивое) решение, которое я могу придумать, - это сначала сдвинуть первое, потом поспать секунду, а затем сдвинуть другое.