0

ユーザーがホバーしたときに各リンクをアニメーション化しようとしていますが、これを行う最良の方法は何ですか?

私のコードは

    <ul class="nav">
    <li><a href="batting.html"class="nav">Batting</a></li>
    <li><a href="bowling.html"class="nav">Bowling</a><li>
    <a href="index.html"><img class="logo" src="images/logo.gif" width="125" height="125"></a> 
    <li><a href="fielding.html"class="nav">Fielding</a></li>
    <li><a href="game.html"class="nav">The Game</a></li>
    </ul>

ありがとう。

4

4 に答える 4

3

はい、純粋に HTML マークアップと CSS を使用して、任意の要素にホバー アニメーションを追加できます。

.animated
{
  transition: prop;
  prop: value1;
}

.animated:hover
{
  prop: value2;
}

propアニメーション化したくない CSS プロパティはどこにありますか。これは、ほとんどのブラウザーで非常にうまく機能します。また、スクリプトを使用してこの動作を作成することもできます。

マークアップを使用して、スクリプトを使用せずにアニメーション化する最も簡単な方法は、:hoverandを使用することtransitionです。アニメーション化する方法は次のmargin-leftとおりです。http://jsfiddle.net/9kpfW/

数値メジャーを使用して任意のプロパティをアニメーション化できます。(12px、12em、12% など) 数値以外のプロパティ (つまりtext-align) でホバー効果を追加することもできますが、トランジションを適用することはできません。また、 を使用して、同じ要素の複数のプロパティをアニメーション化することもできますtransition。

そのため、CSS だけで非常にリッチな効果を作成できます。JavaScript は必要ありません。:hover効果は、Internet Explorer の古いバージョンを含む、ほぼすべてのブラウザーで適切に機能します。ただし、同じアニメーション化されたトランジション効果で古いブラウザーをサポートする必要がある場合は、ほとんどすべてのブラウザーでサポートされ有効になっている JavaScript を使用する必要があります。jQuery JavaScript ライブラリを使用してスクリプトを簡素化することをお勧めします。

luckyamit の回答に基づいて、margin-leftjQuery を使用した同じアニメーションの簡単な例を次に示します。これは、古いバージョンを含むほとんどすべての Web ブラウザーでうまく機能します。

$(".nav li").hover(
 function()
 {
     $(this).find("a").stop().animate({"margin-left" : "40px"});
  },
 function()
 {
     $(this).find("a").stop().animate({"margin-left": "5px"});
 }
);

フィドル: http://jsfiddle.net/LxAva/1/

ただし、これらのまれなブラウザーで同じエクスペリエンスを提供する必要がない場合は、マークアップ、スタイル、およびロジックを切り離すという原則により、純粋な CSS ソリューションをお勧めします。リッチ トランジション効果は、ロジックよりもスタイルに関連しているため、JavaScript ではなく CSS で解決する必要があります。また、ほとんどの場合、CSS の方が実装が簡単で高速です。

于 2013-09-22T08:40:14.270 に答える
0

ここにフィドルがあります

<ul class="nav">
  <li><a href="index.html"><img class="logo" src="images/logo.gif"/></a></li>
  <li><a href="batting.html">Batting</a></li>
  <li><a href="bowling.html">Bowling</a></li>
  <li><a href="fielding.html">Fielding</a></li>
  <li><a href="game.html">The Game</a></li>
</ul>


ul {
  list-style: none;
}
li {
  background: #555;
  float: left;
  margin-right: 15px;
  text-align: center;
  border: 1px solid #333;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
li:hover {
  margin-top: -22px;
}
li a {
  display: block;
  height: 25px;
  width: 120px;
  color: #fff;
  letter-spacing: 1px;
  text-decoration: none;
  padding-top: 4px;
}

jQuery ソリューション

$('li').hover(function() {
  $(this).stop().animate({ marginTop: '-22px' }, 450);
},function() {
  $(this).stop().animate({ marginTop: '0' }, 450);
});

CSS の変更 - transition プロパティが削除されました。

li {
  background: #555;
  float: left;
  margin-right: 15px;
  text-align: center;
  border: 1px solid #333;
}
li:hover {

}
于 2013-09-22T08:46:39.127 に答える
0

jQueryを使用して以下を試すことができます。

$('.nav a').mouseover(function(){

// ここにアニメーションの変更を追加します

}).mouseout(関数(){

// ここにデフォルトの動作を追加します

}))

于 2013-09-22T08:52:04.900 に答える
0

これを試してみてください

//HTML

<ul class="nav">
<li><a href="batting.html"class="nav">Batting</a></li>
<li><a href="bowling.html"class="nav">Bowling</a><li>
<a href="index.html"><img class="logo" src="images/logo.gif" width="125" height="125"></a> 
<li><a href="fielding.html"class="nav">Fielding</a></li>
<li><a href="game.html"class="nav">The Game</a></li>
</ul>

//脚本

 $(".nav").hover(function(){
 $(this).stop().animate({"top" : "10px"});
  }, function(){
  $(this).stop().animate({"top": "0"});
  });

//CSS

  .nav
{
    position: relative;
}

ここにデモがあります。チェックしてください。

于 2013-09-22T08:54:08.110 に答える