Question

我在使用jQuery show / hide功能时苦苦挣扎。

有两个jsfiddles非常接近我想要但却无法弄清楚最后一块。

http://jsfiddle.net/bwilkins/np8qD/ - 借用（NeaWm）

这个很完美，除了我不能在布局中使用绝对定位。我需要相对定位。当我这样做时，由于容器问题我得到的DIV反弹。关于如何解决这个问题的任何线索？

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

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

对我来说几乎有用的另一个小问题是：

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

这个很完美，除了我真的希望将show / hide转换为fadein / fadeout。

如果我可以在没有绝对定位的情况下进行淡入淡出，那么任何一种方法都可以。我感谢任何帮助。

Answer 1

这样的东西？你可以使用fadeIn（时间）和fadeOut（时间）

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




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

Answer 2

我刚刚将一些动画调用更改为淡入淡出，请参阅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();
});

Answer 3

使用类似的东西：

$('#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://jsfiddle.net/robertrozas/YdPm5/47/

jQuery使用淡入淡出显示/隐藏悬停内容

3 个答案: