jQuery fade/reveal delay menu

Question

Hi. I have 3 btns which are simple anchor tags within an unordered list each have a respective id of t1 ,t2 and t3. I also have 3 similar btns that are hidden with css they have respective ids of t1-discover, t2-discover and t3-discover. What I am wanting to achieve is when, say, t1 is clicked after 5 seconds it fadesIn t1-discover and fadesOut t2-discover and t3discover, same for t2 & t3. Here's my attempt with jQuery:

$("#t1").click(function() {
            $("#t2-discover").stop().fadeOut(10);
            $("#t3-discover").stop().fadeOut(10);

            // delay fadein of link
            setTimeout(function() { 
                $('#t1-discover').fadeIn(2000);
            }, 5000);

        });

        $("#t2").click(function() {
            $("#t1-discover").stop().fadeOut(10);
            $("#t3-discover").stop().fadeOut(10);

            // delay fadein of link
            setTimeout(function() { 
                $('#t2-discover').fadeIn(2000);
            }, 5000);

        });

        $("#t3").click(function() {
            $("#t1-discover").stop().fadeOut(10);
            $("#t2-discover").stop().fadeOut(10);

            // delay fadein of link
            setTimeout(function() { 
                $('#t3-discover').fadeIn(2000);
            }, 5000);           
        });

This kinda works, the delay and the fades are there but when one btn is clicked it doesn't cancel out the other 2 animations they fade in but stay there is there a way to say fadeIn but also cancel and reset the other 2 animations? I would also like to learn to do this more efficiently I'm sure this code is very amaterish but I am still learning! Hope this makes sense and thanks in advance.

Answer 1

Have you tried using .stop(true,true) to remove the queued animations and complete the current animation immediately? You could also combine the selectors to reduce the code.

$("#t1").click(function() {
    $("#t2-discover,#t2-discover").stop(true,true).fadeOut(10);

    // delay fadein of link
    setTimeout(function() { 
        $('#t1-discover').fadeIn(2000);
    }, 5000);

});

Answer 2

The problem is that the animation of the other objects has not yet started, since it is called in the timeout ..

You need to clear existing timeouts first..

Also since your code is identical for each item pressed you should generalize it and only write it once..

i would put an id to the <ul> or <ol> that you use like

<ul id="#t-list">

and in the jQuery write ..

var clear; // this hold the timeoutObject
// the following selector will find all links 
// that are children to the #t-list element
$("#t-list a").click(
    function() {
           // the following will fadeOut all elements whose id
           // ends in -discover so that it works with an arbitrary number of them..
           // the $= in the selector means ends with
            $("[id$='-discover']").stop().fadeOut(10);


            var $thisid = this.id; // get the id of the current element so we can use it in the timeout
            // delay fadein of link
            // assign the timeout to a variable so we can clear it
            // later on 
            clearTimeout( clear ); //here we remove current timeouts that have not executed yet..
            clear = setTimeout(function() { 
                                   // use the this keyword instead of the actual id
                                   // to generalize it. it means use the current item
                                   $("[id='"+$thisid+"-discover']").fadeIn(2000);
                                  }, 
                       5000);
           }
  );

Answer 3

This is what jQuery queing was made for :) You can use .delay() and .dequeue() per element. This will fade the others instantly, fade the selected one back in 5 seconds, and cancel any remaining animations

$("#t1").click(function() {
    $("#t2-discover, #t3-discover").dequeue().stop().fadeOut(10);
    $('#t1-discover').delay(5000).fadeIn(2000);
});

$("#t2").click(function() {
    $("#t1-discover, #t3-discover").dequeue().stop().fadeOut(10);
    $('#t2-discover').delay(5000).fadeIn(2000);
});

$("#t3").click(function() {
    $("#t1-discover, #t2-discover").dequeue().stop().fadeOut(10);
    $('#t3-discover').delay(5000).fadeIn(2000);
});

Note this requires jQuery 1.4+....but if you're just getting started, hopefully this isn't a problem.