0

一部の Web サイトでこの効果を見ました: メニューの背景色をホバーするとすぐに変化せず、特定の時間に変化し、アニメーションしているように見える場合、どうすればこの効果を得ることができますか?

4

6 に答える 6

4

これは、css3 transition(javascript なし) を介して、または古いブラウザーで特定のプロパティに対してアニメーションを実行することで簡単に実行できます。

例http://jsbin.com/ulayum/3/edit

a {
   color: 000;
   -webkit-transition: color 2s;
   -msie-transition: color 2s;
   -moz-transition: color 2s;
   -o-transition: color 2s;
   transition: color 2s;
}

a:hover {
   color: #ccc; 
}
于 2012-09-26T14:55:15.830 に答える
2

調べたいのはCSS Transition Effectsです。グーグル検索結果

この基本的なjsFiddleを見てみましょう。カーソルを合わせると、背景色が赤にフェードします。

CSS

div{ 
    background-color: blue;
    -webkit-transition: background-color 1000ms linear;
     -moz-transition: background-color 1000ms linear;
     -o-transition: background-color 1000ms linear;
     -ms-transition: background-color 1000ms linear;
     transition: background-color 1000ms linear;
}
于 2012-09-26T14:56:06.750 に答える
0 
$(selector).mouseover(function(){
 // change color   
}).delay('time');
于 2012-09-26T14:54:19.903 に答える
0

これはあなたが探しているものかもしれません

$("div").hover(function () {
      $(this).effect("highlight", {}, 3000);
});
于 2012-09-26T14:53:33.897 に答える
0

javascript の「setTimeout」関数を使用して、効果に遅延を追加できます。

jqueryホバーイベントを使用した擬似コード:

.... .hover(function() {

      //on mouseover
      setTimeout(FunctionThatDoesSomethingCool(), 3000); //3000 = delay/milliseconds
},
function() {
       //mouseout
}
}); //end hover event
于 2012-09-26T14:53:46.173 に答える
0

あなたが探しているのはthidのようなプラグインだと思うので、見てください：hoverintent

于 2012-09-26T14:53:58.887 に答える