0

これは簡単に作成できると思いますが、まだ jQuery に慣れていないため、学習を始めたばかりです。

CSS で、item:hover クラスを記述し、left:20px; と記述できます。メニュー項目にわずかなスライド効果を適用するなど<li> Item </li>

ここで、これをスムーズなアクションで実現したいと考えています。つまり、20 ピクセルで突然表示されるのではなく、そこまでスライドします。こういうアニメーションにはjQueryのanimateというものを使っていると思いますが、jQueryがすごく苦手で、コードをどこに、どの順番で入れればいいのかわかりません。これの簡単な例を教えてください。:)

4

2 に答える 2

1

bipen's answer で指摘されているように、jQuery を使用できます。

ホバー遷移を処理するためのいくつかの単純な CSS がありますが、mikakun が言ったように、これはブラウザーでのみ機能します CSS3互換性のあるブラウザーのcaniuseをチェックしてください。

li {
    /* put your base styles here */
}

li:hover {
    /* put your new styles here */
    transition:all 300ms ease;
    -moz-transition:all 300ms ease;
    -webkit-transition:all 300ms ease;
    -o-transition:all 300ms ease;
}

これにより、特定の要素に対して指定したものに対して 300 ミリ秒のトランジションが発生します。

CSS3 と互換性のあるブラウザーを使用している場合は、これを実際に確認できます。

http://jsfiddle.net/3leven11/7aRhe/

于 2013-04-15T05:07:35.450 に答える
0

アニメイト()を使う

 $('li').hover(function(){
      $(this).animate({left:20},2000)
  },function(){
      $(this).animate({left:0},2000)
 });

これにより、ドキュメント内のすべての存在がアニメーション化されます..特定<li>のクラスを指定できます..アニメーションの長さはここにあります<li>2000

于 2013-04-15T04:52:50.767 に答える