Funktion abarbeiten ehe Link aufgerufen wird

[Sassar]

Hallo Liebe Community

habe ein kleines prob,

und zwar habe ich 2 Klassen für eine Slider Navigation erstellt, dabei wird ein Bild groß angezeigt und das zweite zusammen geschoben.

Nun möchte ich wenn ich auf den kleinen Slider drücke das der mir den kleinen slider aufschiebt und den anderen zusammen schiebt.

danach soll er den Link welcher im a-Tag steht ausführen.

Folgender HTML-Code wird generiert.

<div class="nav-main-head">
 <a href="destination/" class="nav-main-active" id="nav-main-1">
  Destination
 </a>
 <a href="esbp/" class="nav-main-passive" style="cursor:pointer;" id="nav-main-2">
  Project
 </a>
</div>

im Javascript wird nun folgendes ausgeführt :

$(document).ready(function(){
    $('.nav-main-passive').click(function(){ 
        var id = $(this).attr('id').match(/[0-9]+/)[0]; 
        switch(id){
         case '1' : {
                        $('#nav-main-1').animate({"width": "+=517"}, 1500,'',function() { window.location.href = 'destination/';});
                        $("#nav-main-2").animate({"width": "-=517"}, 1500);
                        break;
                    }
         case '2' : {
                        $('#nav-main-1').animate({"width": "+=517"}, 1500,'',function() { window.location.href = 'esbp/';});
                        $("#nav-main-2").animate({"width": "-=517"}, 1500);
                        break;
                    }
        }
        return false;
    });
});

Dies funktioniert auch wunderschön... nur das Problem ist, dass es halt statisch ist und nicht dynamisch wie ich es gern hätte =)

mein idee wäre am ende beim return false eine Prüfung einzubinden

ungefär dann so

    $(document).ready(function(){
 
    
    $('.nav-main-passive').click(function(){ 
        var solve = false;
        var id = $(this).attr('id').match(/[0-9]+/)[0]; 
        var act_id = $('.nav-main-active').attr('id').match(/[0-9]+/)[0];
        var slide_width = -517
 
        for(var lauf = 1; lauf <= 4; lauf++)
        {
            if(id==lauf)
                slide_width *= -1;
            $('#nav-main-'+lauf).animate({"width": "+="+slide_width}, 1500, '', function() { solve = true;});
            if(id==lauf)
                slide_width *= -1;
        }
        if(solve==true)
            return true;
        else
            return false;
    });
});

-> funktioniert für beliebig viele Slider Pics man muss nur die lauf-Variable erhöhen aber auch das würde ich via Funktion lösen, aber das ist ja nicht das momentane Problem xD

das Problem ist, dass die Animatefunktion von jQuery parallel abläuft und somit nicht gewartet wird bis die Animation durchgeführt wurde. Und dadurch ist die Prüfung ob solve true oder false ist schon ausgeführt wurden, ehe solve den Wert true durch die Animate-Funktion erhählt.

wenn jemand Rat weis würde ich mich sehr freuen =)