Question

For some reason the code is behaving strangely.
This happens in the If Else function. In the Else part, its supposed to fadeOut over 1000ms and then remove the Class and then go onto the next statement. But apparently the second statement gets called out first and it makes everything go bad . 🙁 .

$(function() {

$(document).click(function(e) {
    if((e.target.id == 'RWorld') || (e.target.id == 'abc'))
    { 
    $(".sborder").fadeOut(1000, function() {

    $(".sborder").removeClass("sborder");
    });
    }

});




$("div#inner").children().click(function() {


//$("div#inner .sborder").removeClass("sborder");

var name = $(this).attr('id');

//alert($("div#inner").find("div").hasClass("sborder"));
if($(".sub"+name).hasClass("sborder"))
{
    $(".sub"+name).fadeOut(300, function() {
    $(".sub"+name).removeClass("sborder");
    });
}
else
{



    $(".sborder").fadeOut(1000, function() { 
    $(".sborder").removeClass("sborder");});       // The Problem is in here. This piece of Code doesnt work exactly as i thought it would ...

    $(".sub"+name).addClass("sborder").fadeIn(1000);

}
});
});

Please help :(.

Answer 1

You probably want the fadeIn to happen at the same time as the fadeout, correct? In that case you need to cache your query results like this:

var $sborder = $(".sborder");
$sborder.fadeOut(1000, function() {
    $sborder.removeClass("sborder");
});
$(".sub" + name).addClass("sborder").fadeIn(1000);

Your problem was the removeClass(“sborder”) was removing the sborder class you added to $(“.sub” + name) because it was happening 1 second later. In other words the order things were happening was as follows:

1. Start fading out what currently has a class of “sborder”
2. Add class of “sborder” to $(“.sub” + name)
3. Start fading in $(“.sub” + name)
4. 1 second after item 1. started fading out remove the class of “sborder” from every element that now has a class of “sborder” which now includes every element returned by $(“.sub” + name) because of item 2.

On a best practices note, when using jQuery…

• Whenever possible, try to always drill down from something with an id or tagname ( $(‘#container .sborder’) ). Searching by class can be very slow in older browsers and adding some context means that jQuery doesn’t have to search through your entire document.
• Whenever possible, try to cache your query results. Every time you call $(‘.something’) it is querying the DOM. So if you cache the results in a variable only one query needs to be made. Obviously only do this if you know the DOM hasn’t changed in the interim. In our case here, we know the DOM has changed but we only want to affect the elements that had “sborder” a second ago.