2

我想在其中有几个带有 p 标签但不可见的 div。然后，每当您将鼠标悬停在 div 上时，p 标签的 margin-top 值就会变为其高度的负值。例如：

第一个 p 的高度是 60px，它的 margin-top 值是 0。您将鼠标悬停在其包含的 div 上。第一个 p 的 margin-top 值变为其高度的负值，即 60px，导致 p 向上移动。

第二个 p 的高度是 40px，它的 margin-top 值为 0。您将鼠标悬停在其包含的 div 上。第二个 p 的 margin-top 值变为其高度的负值，即 40px 导致它向上移动。

这是我计划使用的代码：

$(document).ready(function() {
    $("div.works div").hover(function() {
        $(this).find("p").stop().animate({
            marginTop: -$("p").outerHeight()
        }, 250);
    } , function() {
        $(this).find("p").stop().animate({
            marginTop: "0"
        }, 250);
    });
});

我已经在这里设置了非常接近的东西：http: //jsfiddle.net/yryRZ/1/

我遇到的唯一问题是所有 p 都向上移动相同的量，而不是相对于它们自己的高度。似乎它们都上升了第一个 p 的高度。

我能做些什么来解决这个问题？

4

2 回答 2

2

您p可以使用$(selector, context).

$(document).ready(function() {
    $("div.works div").hover(function() {
        var $p = $('p', this);
        $p.stop().animate({
            marginTop: - $p.outerHeight()
        }, 250);
    } , function() {
        $('p', this).stop().animate({
            marginTop: "0"
        }, 250);
    });
});

http://jsfiddle.net/QCect/

于 2012-11-04T20:47:01.173 回答
1

您可以使用position: relative>结构并为属性position: absolute设置动画：http: //jsfiddle.net/yryRZ/3/bottom

于 2012-11-04T20:50:01.437 回答