0

ヘッダー画像の下部にある一連の div で構成されるメニューを作成しています。これは、ホバーすると指定された高さまで上向きに拡張するように設計されています。

私が望むものをほぼ達成するJSFiddleがありますが、何らかの理由で、カーソルがコンテナーの上にあるときに div がコンテナーの上部にジャンプしています。この動作の原因となっている JS (またはおそらく CSS) に何が欠けているのか疑問に思っています。目的の効果を示すのに役立つ画像も含めました。

画像

いつものように、どんな助けも大歓迎です!

4

3 に答える 3

1

あなたのJSFiddleを見ると、トッププロパティもアニメーション化している理由がわかりません。それがないコード:

$("#pagebuttonhome").hover(function() {
    $("#pagebuttonhome").animate({'height': '80px'});
}, function() {
    $("#pagebuttonhome").animate({'height': '30px'});
});

期待どおりに機能すると思います。

これは、CSS のみ (トランジションあり) を使用しても達成可能です。そのソリューションに興味がある場合はお知らせください。

注: CSS のみのソリューションは、トランジションをサポートしていないブラウザーと互換性がありません。

于 2012-09-06T03:04:15.317 に答える
0

要素のpositiontoabsoluteを設定してからtopまたはleftの値を設定すると、値は原点 (0,0) を基準として解釈されます。hereのように、代わりにmarginTop/を使用してください。marginLeft

于 2012-09-06T03:07:46.713 に答える
0

は CSS で既に定義されているため、アニメーション化するときに属性bottom: 0pxを定義する必要はありません。topを再定義するだけheightで、期待どおりに機能します。その例を次に示します: http://jsfiddle.net/DbTyX/20/

$("#pagebuttonhome").hover(function() {
    $("#pagebuttonhome").animate({'height': '80px'});
}, function() {
    $("#pagebuttonhome").animate({'height': '30px'});
});

最適化のために、次のthisキーワードも使用できます。

$("#pagebuttonhome").hover(function() {
    $(this).animate({'height': '80px'});
}, function() {
    $(this).animate({'height': '30px'});
});
于 2012-09-06T03:09:40.080 に答える