0

垂直方向のナビゲーションで画像に小さなフェードイン/アウトのホバー効果を持たせるために書いたコードがあります。唯一の問題は、アクティブに何もしないようにできないことです。

私が望むのは、ナビゲーションで画像がフェードイン/フェードアウトすることですが、アクティブなときは 100% の不透明度のままで、ホバー時にアニメーション化しません。以下のコードの問題は、アクティブでない場合でもすべてアニメーション化されることですか?

今、私はjqueryの専門家ではありませんが、それは私が学びたいことなので、助けていただければ幸いです。

      if (!$(".view-sidebar-links .views-row a").hasClass("active")) {
                $(".view-sidebar-links .views-row").hover(
                    function() {
                    $("img", this).fadeTo("fast", 1);;
                },
                function() {
                    $("img", this).fadeTo("fast", 0.33);;
    });
  };

html

     <div class="view-content">

       <div class="views-row views-row-1 views-row-odd views-row-first">
        <h2 class="title"><a href="/alpiniainstitute/about/clinical-devlopment">Clinical devlopment</a></h2>    
        <a href="/alpiniainstitute/about/clinical-devlopment"><img typeof="foaf:Image" src="http://localhost/alpiniainstitute/sites/default/files/styles/sidebar_links/public/images/slideshow/image01.jpg" /></a>
      </div>

      <div class="views-row views-row-2 views-row-even">
       <h2 class="title"><a href="/alpiniainstitute/about/technological-development">Technological development</a></h2>    
       <a href="/alpiniainstitute/about/technological-development"><img typeof="foaf:Image" src="http://localhost/alpiniainstitute/sites/default/files/styles/sidebar_links/public/images/header-images/Screen%20shot%202012-05-11%20at%2010.05.30.png" /></a>
      </div>

      <div class="views-row views-row-3 views-row-odd views-row-last">
       <h2 class="title"><a href="/alpiniainstitute/team" class="active">Our Team</a></h2>    
       <a href="/alpiniainstitute/team" class="active"><img typeof="foaf:Image" src="http://localhost/alpiniainstitute/sites/default/files/styles/sidebar_links/public/images/header-images/team-header-image.jpg" /></a>    
      </div>

    </div>

編集：

私はとても近いです。

    $(".views-row").delegate("a:not(.active)", "mouseenter", function() {
      $('img').fadeTo('fast', 1);
    }).delegate("a:not(.active)", "mouseleave", function() {
      $('img').fadeTo('fast', 0.33);
    });

上記のコードがページ上のすべての画像で機能することがわかるように、なんとか機能させることができました。('img', this) を追加すると機能しませんか?

4

2 に答える 2

1

あなたの論理は少し間違っています。イベント ハンドラーを条件付きで設定していますが、その逆ではありません (つまり、イベント ハンドラーで条件をチェックしています)。

また、デリゲートを試してください：

$('.views-row')
    .on('mouseover', 'a:not(.active)', function () {
        $('img', this).fadeTo('fast', 1);
    })
    .on('mouseout', 'a:not(.active)', function () {
        $('img', this).fadeTo('fast', 0.33);
    });

このように、ビュー行がactiveクラスのオン/オフを切り替える場合でも、ハンドラーを実行するかどうかをオンザフライで確認しながら、実際に DOM に配置するイベント ハンドラーの数を最小限に抑えることができます。

于 2012-05-18T10:56:56.897 に答える
0

Jquery で .not('selector') を使用してみることができます

更新：これを試してください：

$(".views-row").delegate("a:not(.active)", "mouseenter", function() {
  $(this).find('img').fadeTo('fast', 1);
}).delegate("a:not(.active)", "mouseleave", function() {
  $(this).find('img').fadeTo('fast', 0.33);
});
于 2012-05-18T09:43:05.363 に答える