CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2706463
user2706463

Reputation: 99

Fade in / Fade out with hover function

Hi I would like to implement a Fade in / Fade out effect on my hover, How Can I do this cause I need to keep position of cursor for Text Displayed.

http://jsfiddle.net/u3pW8/34/

    $(function() {
    $("#static .wrapper").hover(function (e) {
        var parentOffset = $(this).parent().offset(); 
        var relX = e.pageX - parentOffset.left;
        $(this).children(".hidden-content").css("left", relX);
    });
});

Thx for help !

Upvotes: 0

Views: 104

Answers (2)

Aashray
Aashray

Reputation: 2763

I have made some changes to your code. This should work. I added this line among other things:

$(this).children(".hidden-content").fadeIn('slow');

http://jsfiddle.net/u3pW8/37/

Upvotes: 0

Curtis
Curtis

Reputation: 103428

Use CSS3 transition:

.hidden-content {
    position: absolute;
    opacity:0;
    display:block;
    transition: opacity 0.2s ease;
}

.wrapper:hover .hidden-content {
    opacity:1;
}

http://jsfiddle.net/u3pW8/35/

Upvotes: 1

Related Questions