2

内部に p タグが含まれているが表示されていない複数の div が必要です。次に、div の上にカーソルを置くと、p タグの margin-top 値がその高さの負の値に変わります。例えば：

最初の p の高さは 60px で、margin-top の値は 0 です。それを含む div の上にカーソルを置きます。最初の p の margin-top 値は、その高さの負の値である 60px に変更され、p が上に移動します。

2 番目の p の高さは 40px で、margin-top の値は 0 です。それを含む div の上にカーソルを置きます。2 番目の 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 に答える