jQuery show / hide content on hover with fade

I'm struggling a little with a jQuery show/hide function.

There are two jsfiddles that are so close to what I want but cannot figure out the final piece.

http://jsfiddle.net/bwilkins/np8qD/ - borrowed from ( NeaWm )

This one is perfect except that I can't use absolute positioning in my layout. I need relative positioning. When I do this, the resulting DIV bounces due to container issues I guess. Any clues as to how to get around this?

.animalcontent {
    position:absolute;
    top:100px;
}

p.animal {display:inline-block;padding-right:20px;}

The other jsfiddle that almost works for me is:

http://jsfiddle.net/YdPm5/40/

This one is perfect except that I would really like to have the show/hide be transitioned in like fadein/fadeout.

Either solution is fine if I can have a fade without absolute positioning. I appreciate any help.

---

Use something like this:

$('#item-wrapper a').mouseenter(function () {
console.log($(this).data('panel'));
if ($(this).data('panel')) {
    $('.panel').hide();
    $('#' + $(this).data('panel')).fadeIn();
}
});
$('#item-wrapper').mouseleave(function () {
$('.panel').fadeOut();
});

Working fiddle here: http://jsfiddle.net/robertrozas/YdPm5/47/

---

Something like this? you can use fadeIn(time) and fadeOut(time)

[http://jsfiddle.net/YdPm5/46/][1]




[1]: http://jsfiddle.net/YdPm5/46/

---

我只是将一些动画调用改为淡入淡出，请参阅jsFiddle：http://jsfiddle.net/YdPm5/49/

$('#item-wrapper a').mouseenter(function () {
    console.log($(this).data('panel'));
    if ($(this).data('panel')) {
        $('.panel').hide();
        $('#' + $(this).data('panel')).fadeIn();
    }
    });
$('#item-wrapper').mouseleave(function () {
    $('.panel').fadeOut();
});

链接地址: http://www.djcxy.com/p/21390.html

上一篇: jquery负载淡入淡出的内容

下一篇: jQuery在淡入淡出时显示/隐藏内容