使用.slideUp的功能不会设置动画

Question

ok first thing the function -

//function to change page   
function changePage(newPage) {
    $('.current').slideUp();
    $('.current').removeClass('current');
    $(newPage).addClass('current');
    $('h3.title').text('');
    $('.slider_container').empty();
    $(newPage).slideDown();
}

how its called

$('.specialistLink').on('click', function(event) {
    event.preventDefault();
    $('#footerLinks').removeClass('hide');
    $('header').css({'border-bottom': '10px solid #738c1f'});
    changePage("#page3");
    $('h3.title').text('dp-specialist').css({'color' : '#738c1f'}); 
    $('#page3 .left ul a:first').click();
    $('#footerLinks .left').css({'background-color':'#738c1f'});
    $('#footerLinks .right').css({'background-color':'#c8c0b5'});
});

Dom element for the above click event

<a href="#" class="specialistLink">
<div class="left">
  <h3>dp-specialist ></h3>
</div>
</a> 

dom element to show/animate (minus the content for space reasons)

<section id="page3" class="hide">
</section>

Now the problem - I have 2 links like this that are identical (except #page to load, css values to change and the class that triggers the click), however this one never animates - it displays just fine (the content changes and #page3 shows) but the current #page does not slide up and the new one doesn't slide in except if #page3 is currently in view already in which case it does slide in.

Answer 1

maybe using a callback function for the slideUp will fix your problem (not sure, though):

function changePage(newPage) {
    $('.current').slideUp('slow',function() {
        $('.current').removeClass('current');
        $(newPage).addClass('current');
        $('h3.title').text('');
        $('.slider_container').empty();
        $(newPage).slideDown();
    });

}

This will execute all that stuff inside the second function once the slideUp animation is complete

Answer 2

See if adding the current class after the animation is done will help out.

//$(newPage).addClass('current');
$('h3.title').text('');
$('.slider_container').empty();
$(newPage).slideDown(400, function(){ $(this).addClass("current"); } );