CODEWITHSUNDEEP
jquerydelayfadeout
user272899
user272899

Reputation: 851

Jquery delay on fadeout

I have this code that changes the opacity of the div on hover.

$("#navigationcontainer").fadeTo("slow",0.6); 

$("#navigationcontainer").hover(function(){ $("#navigationcontainer").fadeTo("slow",
    1.0); // This sets the opacity to 100% on hover },function(){ 

$("#navigationcontainer").fadeTo("slow",
    0.6); // This sets the opacity back to 60% on mouseout });

I want to have a delay before setting the div back to 0.6 opacity how would i do this

Upvotes: 13

Views: 44866

Answers (3)

odavy
odavy

Reputation: 485

How about

$("#hover_me").hover(function() {
                $("#target_div").fadeTo("slow", 1.0);
           }, function() {
                $("#target_div").delay(800).fadeTo("slow", 0.6);
           });

Upvotes: 0

MedicineMan
MedicineMan

Reputation: 15314

use set timeout with a callback to the functionality you want and a delay that you want.

$("#navigationcontainer").fadeTo("slow",0.6); 

$("#navigationcontainer").hover(function(){ $("#navigationcontainer").fadeTo("slow",
    1.0); // This sets the opacity to 100% on hover },function(){ 


var delay = 1000;
setTimeout(function() 
    { 
        $("#navigationcontainer").fadeTo("slow",
            0.6); // This sets the opacity back to 60% on mouseout });

    },
    delay
)

Upvotes: 2

peirix
peirix

Reputation: 37731

With jQuery 1.4, you have a method called delay, which takes an integer representing ms you want to delay

$("#navigationcontainer").delay(500).fadeTo("slow", 0.6);

Half a second delay

Upvotes: 52

Related Questions