Search code examples
jquerymultiple-select-query

jquery multiple selectors, fade in and out


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


Solution

  • http://jsfiddle.net/XgtVw/

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