3

ナビゲーション メニューの (a と a:hover) の間で、fadeIn/fadeOut トランジションを実行しようとしています。

ナビゲーション メニューは次のように構成されています。

<div class="menubar">
  <ul id="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Team</a></li>
    <li><a href="">News</a></li>
    <li><a href="">EVENTS</a></li>
    <li><a href="">MultiMedia</a></li>
    <li><a href="">Fans</a></li>
    <li><a href="">Forums</a></li>
  </ul>
</div>

a タグの CSS スタイルは次のとおりです。

#mainmenu li a {
    color: #fdb813;
    line-height: 50px;
    padding:12px 25px;
    text-shadow: 0px 1px 4px #ccc;
    text-decoration:none;
}
#mainmenu li a:hover{
    color: #000;
    background: url(images/menuhover.png) repeat;
    text-shadow: 0px 1px 4px #777;
}

私は通常の状態とホバー状態の間の遷移をfadeInとfadeOutで行いたい..私はjQueryの専門家ではないので、コードをハッキングしてみましたが、いつもメニューが消えてしまいます!

-編集-

明確にするために、これは私がトランジションを次のようにしたい方法です：

ホバーイン: 背景画像とテキストの色が徐々に表示されます。元のテキストはそのまま残ります（トランジションの開始時に消えてはいけません）

hover-out: bg-img とテキストが徐々に消えます (元の状態を示します)

-編集2-

これまでのところ、次の部分を使用して、フェードイン遷移を行うことができました。

<script type="text/javascript">
 $(document).ready(function(){
  $('#mainmenu li a').hover(
                function () {
                    $(this).css('opacity',0.1).animate({opacity: 1},250);
                }, //this is called on hover in
                function () {
                    $(this).addClass('hovered');
                    $(this).fadeOut(function(){
                        $(this).removeClass('hovered').fadeIn(250);
                    });
                } //this is called on hover out
            );
       }); 
</script>

ただし、fadeOut のトランジションはやや奇妙な動作をしています。私はどんな提案にもオープンです。注: クラス 'hovered' は a:hover CSS セレクターに一致するクラスです

4

3 に答える 3

1

マウスホバーでアニメーションを実行したいと仮定しています。以下は、あなたが行くことができる簡単なコードです。

  1. ホバーイベントを各アンカーにバインドします。これは、以下のように実行できます

    $('#mainmenu').find('a').hover(function(){

   //comes here upon hover
});

  2. フェードインまたはフェードアウトまたはアニメーションを実行します。以下は、そうする非常に単純なコードです。

     <script>
 $(document).ready(function(){
     $('#mainmenu').find('a').hover(
       function(){
            $(this).animate({opacity: 0.25}, 200, function() { }); 
           } ///gets called when hover in
      ,
       function(){
             $(this).animate({opacity: 1}, 200, function() {}); 

        }//gets called when hover out
     );
     }); 
  </script>

したがって、基本的には、アンカーにホバーするとアニメーションを実行し、ホバーアウトすると生成される効果を削除します。これは非常に単純なケースであり、アイデアを提供することに専念しています。

背景画像をアニメーション化したいので、jquery animate メソッドではできませんが、単純なロジックで行います。以下のスクリプトを試してください：

  <script>
         $(document).ready(function(){
             $('#mainmenu').find('a').hover(
             function(){
               $(this).animate({opacity: 0}, 'slow', function() {
                        $(this).css({'background-image': 'url(images/hovermenu.png)'})
                        .animate({opacity: 1});
                        }); 
             } ///gets called when hover in
              ,
             function(){
               $(this).animate({opacity: 0}, 'slow', function() {
                            $(this).css({'background-image': 'url()'})
                        .animate({opacity: 1});
                        }); 
             });
             }); 
          </script>

だから今あなたがしていることは、

ホバーイン時: アンカーの不透明度を 0 にアニメートし、背景画像をそれに割り当ててから、不透明度をアニメートして 1 に戻します。

ホバーアウト時: アンカーの不透明度を 0 にアニメートし、背景 - 画像を削除してから、不透明度を 0 にアニメートします。

それはあなたが望んでいたものに近いです。ほら、あなたが望んでいたのは、テキストを静的にして背景画像に影響を与えることでしたが、これは現在のメニュー構造では不可能です。

テキストと背景画像を分離する必要があります。つまり、アンカーの下に保持されている他の要素の背景画像をアニメーション化する必要があります。

繰り返しますが、アイデアを提供します。

于 2012-12-26T11:33:37.493 に答える
0

CSS トランジションと jQuery は、フォールバックとしてのみ使用できます。役立つリンクを次に示します。

于 2012-12-26T11:24:38.723 に答える
0 
The Js code is below :

$("a").hover(function(){

        $(this).fadeOut(500);
        $(this).fadeIn(500);

    },function(){});

最初の関数は hoverin で呼び出され、2 番目の関数は hoverout で呼び出されます。

jquery-latest を 1 つ含める必要があります。

<script src="http://code.jquery.com/jquery-latest.js"></script>

そして、ここで効果を見ることができます：http://jsfiddle.net/WrspV/

于 2012-12-26T11:37:02.117 に答える