Question

I’m new to Jquery… I’m trying to have a simple system as shown below…

http://jsfiddle.net/z7PaJ/

I want to have all visible elements fade out, and then the appropriate elements fade in based on what is selected. I managed to get around using if/else logic about what is visible by just blanketing the script with fadeIn and fadeOut, so Jquery will decide for itself what is visible (maybe this is a problem?). BUT the biggest issue is that elements start fading in before everything has faded out. In other words, an element will decide its visible before all of the other elements have been hidden.

I can tell I need to use callbacks, but every test I’ve done has only made the situation more comlicated… here is the most basic example.

Thanks!

Answer 1

Here’s another version:

 $("#all").addClass("highlight");

 $("#all, #m1, #m2, #m3").mouseover(function(){
    $("*").removeClass("highlight");
    $(this).addClass("highlight");
    var elm = 'n'+$(this).attr('id').substr(1);
    elm = elm=='nll' ? elm='ul li' : elm = $('.'+elm);
    $("ul li:visible").stop(true, true).fadeOut("slow", function() {
         $(elm).fadeIn("slow");
    });
});

Also with a modified fiddle: http://jsfiddle.net/adeneo/z7PaJ/23/