1

フェードしたいホバーの画像スワップを使用したシンプルなギャラリースタイルのリンク設定があります。私は現在`を使用しています

.stop().hide().FadeTo("slow",1);`

左側のリンクの1つにマウスを合わせるとトリガーされた画像をフェードインするには、ここに私が話していることを確認するためのテストサイトがあります

testsite00.hostoi.com

マウスアウトでフェードを終了する方法がわかりません。リンク間にシームレスなフェードを作成しようとしていますが、マウスアウトでフェードが繰り返されます。Iv'eは.stop（）と.hide（）のいくつかの組み合わせを試しましたが、効果の実行を停止できないようです。何か案は？前もって感謝します。

jQuery：

$(document).ready(function() {
// Image swap on hover
$("#gallery ul li img").hover(function(){   
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''))
  function() { //mouseenter handler 
        $(this).stop().fadeTo("slow",0.5);
  }
  function (){ //mouseleave handler 
        $(this).stop().fadeTo("slow",1.0);
    }
});

HTML：

<div id="gallery">
  <img src="images/gallery/home.png" alt="" id="main-img" />
   <ul>
     <li class="home"><img src="images/gallery/thumb/home.png" alt="" /></li>
     <li class="about"><img src="images/gallery/thumb/about us.png" alt="" /></li>
     <li class="contact"><img src="images/gallery/thumb/Contact Us.png" alt="" /></li>
     <li class="services"><img src="images/gallery/thumb/Services.png" alt="" /></li>
   </ul>
</div>
4

2 に答える 2

1

ストップコールにtrueを渡してアニメーションキューをクリアするか、true、trueを渡してキューをクリアし、すぐにアニメーションを終了します。

.stop(true, true)

また、2つの関数をホバーハンドラーに渡す必要があります-mouseenterで何が起こるか、次にmouseleaveで何が起こるか-それを再表示（または非表示-目的の動作が何であれ）したい場合は、2番目の関数に入れる必要があります。

  $("#gallery ul li img").mouseenter(function(){
    var currentImg = $('#main-img').attr('src');
    var targetImg = $('this').attr('src').replace('thumb/', '');
    if (currentImg !== targetImg) {
      $('#main-img')
        .stop(true)
        .fadeTo(0,0)
        .attr('src', targetImg)
        .fadeTo('normal', 1);
    }
  });

したがって、これが行うことは、最初に、ホバーされている画像がまだ大きな画像のサムネイルではないかどうかを確認することです。ここでフェードアニメーションを実行する必要はありません。そうでない場合は、アニメーションキューを停止してクリアし（アニメーションが高速ホバリングで積み重なるのを防ぐため）、現在の大きな画像を即座に不透明度0にフェードし（非表示にします）、全体像をサムネイルで表される画像に変更します。全体像をフェードインします。フェードイン速度は現在「通常」に設定されていますが、実験したい場合は、「遅い」、「速い」、またはミリ秒の値にすることができます。マウスリーブでの動作は必要ないため、ホバー機能はなくなりました。

于 2011-06-17T07:21:15.487 に答える
0

確かではありませんが、実際に何をしているのかについてよくある誤解に直面している可能性がありますmouseout。バブリングが原因で、イベントは子要素でもトリガーされますが、これは実際には直感的ではありません。

http://www.quirksmode.org/dom/events/mouseover.html

それが機能するかどうか試してみmouseleaveてください。

于 2011-06-17T07:23:30.730 に答える