CODEWITHSUNDEEP
javascriptjquery
Vedran Mile Tomljanovic
Vedran Mile Tomljanovic

Reputation: 73

jQuery delay and fadeOut sometimes not working

I have a problem with delay() and hide() on multiple elements.

Let's say I have something like this:

<div id="one">
<p id="label1_one">text</p>
<p id="label2_one">text</p>
</div>

<div id="two">
<p id="label1_two">text</p>
<p id="label2_two">text</p>
</div>

<div id="three">
<p id="label1_three">text</p>
<p id="label2_three">text</p>
</div>

and script

function toogle(){
if (1){
$("#one").css("display", "inline-block");
$("#label1_two").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_two").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label1_three").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_three").css("display", "inline-block").delay(10000).fadeOut(1000);
}
if (2){
$("#two").css("display", "inline-block");
$("#label1_one").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_one").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label1_three").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_three").css("display", "inline-block").delay(10000).fadeOut(1000);
}
if (3){
$("#three").css("display", "inline-block");
$("#label1_one").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_one").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label1_two").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_two").css("display", "inline-block").delay(10000).fadeOut(1000);
}
}

Each time some of elements stays visible on page. Is there some known problem with this.

Or someone can point me to some other solution.

Code is example from real situation. :)

Thanks in advance, Vedran

Upvotes: 0

Views: 289

Answers (2)

Nilzone-
Nilzone-

Reputation: 2786

if(1)

means it will always visit your if-statements

If you're referring to the div id, in your jQuery, you need to change it to something like this:

$('#one').click(function(){
    //do something.
});

Upvotes: 1

winthers
winthers

Reputation: 223

You can try using the .stop method (http://api.jquery.com/stop/) , if the error occurs when you try to animate an already animating object calling stop will clear all animations before start

$("#label1_one").css("display", "inline-block").stop(true, true).delay(10000).fadeOut(1000);

Upvotes: 0

Related Questions