CODEWITHSUNDEEP
javascriptjqueryjquery-uihoverjquery-hover
user782104
user782104

Reputation: 13545

fadein() not working after fadeout()

$("#slider").live("hover", function(e) {
    if (e.type == 'mouseenter') {
        $("#slider").delay(100).fadeIn(); 
    }
    else {
        $("#slider").delay(1200).stop(true, true).fadeOut();
    }
});

I used a slider in jQueryUI. What I would like to achieve is when the user hovers their mouse over the slider, it shows, and when the mouse is not hovered over it, it fades out. However, my case is after the first time of the fade out, the slider do not fade back in no matter where I put my mouse on that location of slider. How can I fix this problem? Thanks

Upvotes: 0

Views: 892

Answers (2)

Jai
Jai

Reputation: 74738

This is another solution with mouseover and mouseout handlers with .animate() method:

$("#slider").mouseover(function() {
    $("#slider").stop().animate({"opacity":0},500);
}).mouseout(function() {
    $("#slider").stop().animate({"opacity":1},500);
});

Upvotes: 0

Bruno
Bruno

Reputation: 5822

Using ahren's suggestions try this

$("#slider").hover( function( ) {
    $("#slider").fadeTo( 1000, 1 );
},
function( ) {
    $("#slider").fadeTo( 1000, 0 );
});

Fiddle here

Upvotes: 2

Related Questions