Jquery delay between two fade toggle effects

Question

I am showing and displaying two divs using Jquery

The code is

var show_hide = function () {
    $("#extravagents_label").fadeToggle(function () {
        $("#liquid.liquidContanier").fadeToggle().delay(1500);
    });
}

setInterval(show_hide, 1500);

but there is problem. it is not doing the job properly. It should display the other div when one is completely hidden. Kindly visit 203.81.193.2/jsvt/ . There are the icons and the text under the main slider that is displaying and hiding.

Answer 1

You should be careful with timings and setInterval it can mess things up pretty bad.

If timings are the problem:

var show_hide = function () {
    $("#extravagents_label").fadeToggle(callblack);
}

var callblack = function () {
    $("#liquid.liquidContanier").fadeToggle()
        .delay(1500).queue(show_hide);
}

Hope this helps, still not sure what you're after

Answer 2

I have made a jsfiddle for you that modifies your code somewhat. Basically your interval is firing every 1.5 seconds whilst you're also delaying the fadeToggle on the second element. Because you can't time how long it's going to take jQuery to fade the elements in and out, the callback handles it for you.

var show_hide = function () {
    $("#extravagents_label").fadeToggle(function () {
        $(this).fadeToggle();
        $("#liquid.liquidContanier").fadeToggle(function () {
            $(this).fadeToggle();
            show_hide();
        });
    });
}

setTimeout(show_hide, 1500);

Answer 3

Try this:

jQuery :

function show_hide() {
 $('#extravagents_label').delay(1000).fadeOut(1000).delay(1000).fadeIn(1000);
 $("#liquid .liquidContanier").delay(1000).fadeIn(1000).delay(1000).fadeOut(1000);
   //don't forgot to use space between id and it's child class
}

setInterval(show_hide,4000);
           //this timing should be total timing values of the show_hide function

guessing your css should be like:

#extravagents_label { display:block; }
#liquid .liquidContanier { display:none; }