JavaScript Forum

**pealo86** · 04-08-2010, 10:51 AM

Just posted this thread a few mins ago and for some reason it got deleted? Maybe it was because of the URL shortening I used.

Anyway here is an example of what I mean
http://www.mattpealing.co.uk/concept/simplesubmission/

I can't get each stage of the animation to execute in the order that I want, here is the code I'm using:

Code:

    1.    // content accordion
    2.    $(document).ready(function(){
    3.    lastBlock = $("#a1");
    4.    maxWidth = 290;
    5.    minWidth = 145;
    6.    $("#slide li a").click(
    7.    function(){
    8.    if($(this).attr('class') != 'active') {
    9.    $('#slide .active').removeClass('active');
    10.    $('#slide li .content').fadeOut(500);
    11.    $('#slide li .num').fadeIn(500);
    12.    
    13.    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
    14.    $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
    15.    lastBlock = this;
    16.    
    17.    $(this).addClass('active');
    18.    $('#slide .active .num').fadeOut(500);
    19.    $('#slide .active .content').fadeIn(500);
    20.    }
    21.    });
});

Lines 13 to 15 deal with the actual 'accordion' part of the animation. I want it so that the animation goes in the following order:
1. User clicks an unopened coloured box
2. The content in the currently open box fades out
3. The large number in the currently open box fades in
4. The accordion animates so that the open box closes, and the newly selected box opens
5. The large number fades out
6. The new content fades in
But it seems like a lot of these are happening simultaneously, I want it so that they happen one after the other.

I've tried using the new 'delay' method, but the accordion part of the script just seems to ignore it! I've also tried using callback's to bind a function so that it executes when the previous function has finished executing, but it seemed to mess things up as the '$(this)' variable seemed to get overwritten by the nested functions... if that makes sense?

Does anyone know what the best approach is?

Here is what I've tried by using 'delays', but the animation happens as soon as the box has been clicked for some reason!

Code:

    1.            function(){
    2.                if($(this).attr('class') != 'active') {
    3.                    $('#slide .active').removeClass('active');
    4.                    $('#slide li .content').fadeOut(500).delay(1000);
    5.                    $('#slide li .num').fadeIn(500).delay(1000);
    6.                   
    7.                    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 }).delay(1000);
    8.                    $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400}).delay(1000);
    9.                    lastBlock = this;
    10.                   
    11.                    $(this).addClass('active');
    12.                    $('#slide .active .num').fadeOut(500);
    13.                    $('#slide .active .content').fadeIn(500);
    14.                }
    15.        });