Question

I have a some basic jQuery to toggle the text in a button as well as toggle between two divs. Problem is, the incoming element appears before the outgoing one is gone, and then the incoming slides up at the end of the animation. It looks kind of herky-jerky. Here’s my fiddle.

For posterity, here’s my 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>

And my jQuery:

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

Should I be firing the animations serially serially rather than in a single fadeToggle?

Thanks for any advice!

Answer 1

easy 🙂 use callbacks. jquery gives that to you for free. Basically you pass a function as the last parameter and that is run after the animation. I had to do a quick DOM manipulation, but other than that it’s pretty straight forward.

$("#globalTicketsBtn").click(function() {
    $(".toggle:first").animate({ opacity: "toggle" }, 1000 ,function(){
        $(".toggle:last").animate({ opacity: "toggle" }, 1000);
        $(".toggle:last").insertBefore(".toggle:first");
    });
    $('#globalTicketsBtn').text($('#globalTicketsByHour').is(':visible')? 'Show Chart' : 'Show Table');
});

http://jsfiddle.net/qjjDc/2/