jquery multiple selectors, fade in and out

Question

I have my click function

$("#productlink1").click(function() {
    $('#productstitle').fadeOut(1000, function(){
        $('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
        });
    $('#productscontent,#flexibility').fadeOut(1000, function(){
        $('#corporate').fadeIn(1000);
        }); 

    remove();
    $(this).addClass('active');
return false;
});

So when i click the link, the title fades out then the new title fades in, all works okay

However the second piece of code, the fade in is appearing before the fade out, this line

$('#productscontent,#flexibility').fadeOut(1000, function(){
            $('#corporate').fadeIn(1000);
            });

However if i just have one element selected it works fine

$('#productscontent').fadeOut(1000, function(){
                $('#corporate').fadeIn(1000);
                });

Is there an issue with multiple selectors?

Thanks

Answer 1

http://jsfiddle.net/XgtVw/

 $('#link').click(function() {
  $("#div1, #div2").each(function(){
    $(this).fadeOut(1000, function(){
        $('#div3').fadeIn(1000);
    });
}); 
})

Answer 2

From the jQuery .fadeOut() documentation:

If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

Answer 3

Thank you for all the suggestions, I couldn't seem to get the above to work,

essentially as the element is hidden, its fading in immediately, a "hacky" way around this for me was just adding a delay

$("#productlink1").click(function() {
    $('#productstitle').fadeOut(1000, function(){
        $('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
        });
    $('#productscontent,#flexibility').fadeOut(1000, function(){
        $('#corporate').delay(1000).fadeIn(1000);
        }); 

    remove();
    $(this).addClass('active');
return false;
}); 

This stopped the fade in until the other elements had faded out, its not how i wanted to fix it but it works for now.

With the other answers the same was happening

Elements already hidden would fade 1st

Answer 4

DEMO

Hope you have hidden the element corporate at first

$(document).ready(function(){
    $("#corporate").hide();     // hiding corporate on document load
    $("#productlink1").click(function() {
        $('#productstitle').fadeOut(1000, function(){
            $('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
            });
        $('#productscontent,#flexibility').fadeOut(1000, function(){
            $('#corporate').fadeIn(1000);
            }); 

        remove();
        $(this).addClass('active');
    return false;
    });
    });