0

ここにポーザーがあります：

ページをロードすると、[メール] タブと [LinkedIn] タブの最初のマウスオーバーで、アニメーションがエンドポイント フレームにジャンプします。タブドロップをアニメーション化する必要があります。

最初のホバーの後、すべて問題なく、ホバーは期待どおりに動作します。mouseenter、mouseover、およびhoverを試しました。個人的には、mouseenter が一番好きですが、それは私です。動作は、ジャンプを示さない以下の水平トピック ボタンに似ています。変。

コードは次のようになります。

$("#zipperTabLinkedin a")
    .mouseenter(function(e){
        $(this).animate(
            {padding:'30px 0 0 0'},
            {duration:500},
            {easing:'swing'})
    })
    .mouseleave(function(e){
        $(this).animate(
        {padding:'5px 0 0 0'},
        {duration:500},
        {easing:'swing'})
});

ただ奇妙です。http://desertbiz.biz/repl.htmlで効果を確認できます。

4

2 に答える 2

1

の を削除padding-topしa:hoverます。

http://jsfiddle.net/7Mwja/6/

于 2012-09-28T07:12:13.443 に答える
0

これは、失敗することのないcss3トランジションを使用したソリューションです。

フィドルデモ

transionプロパティを使用してアニメーション化します。

 -webkit-transition:padding-top 0.1s ease-in;

css3トランジションのチュートリアル

www.w3schools.com/css3/css3_transitions.asp

（唯一の欠点は、クロスブラウザcssを作成する必要があることです）

于 2012-09-28T07:11:04.497 に答える