CODEWITHSUNDEEP
jquerymultiple-select-query
user2389087
user2389087

Reputation: 1762

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

Upvotes: 1

Views: 2659

Answers (4)

user2389087
user2389087

Reputation: 1762

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

Upvotes: 1

SarathSprakash
SarathSprakash

Reputation: 4624

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;
    });
    });

Upvotes: 0

MrSkippy
MrSkippy

Reputation: 348

http://jsfiddle.net/XgtVw/

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

Upvotes: 2

DevlshOne
DevlshOne

Reputation: 8457

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.

Upvotes: 2

Related Questions