1

次のような HTML 構造があります。

<ul id="carousel" class="jcarousel-skin-photos">
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>

            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>              
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
        </ul>


        <a href="javascript:;" id="zoom">Yakınlaştır</a>

そして、フェードイン/アウト効果のための小さな jQuery コード スニペット:

    $('ul#carousel li a').hover(
  function() {
    $('a#zoom').fadeIn('fast');
  }, 
  function() {
    $('a#zoom').fadeOut('slow');
});

a#zoom最後に、要素にカーソルを合わせたときに要素を表示したいと思いul#carousel li aます。ただし、フェードイン/アウト効果には奇妙な点があります。

これは私の作品ページです。オンラインでご覧いただけます。

では、どうすればこの奇妙さを修正できますか?

4

2 に答える 2

6

この問題は、マウス ポインターがズーム アイコンの上に移動すると、カルーセル上と見なされなくなり、フェードアウトが開始されるために発生します。フェードアウトが完了すると、マウス ポインターが突然カルーセル上にあるため、フェードインが再び開始されます。

奇妙な動作は、ズーム アイコンが点滅することだと思います。

これを修正するには、ズーム アイコン自体にホバー イベント ハンドラーを追加して、マウスがズーム アイコン上に移動したときにフェードアウトをキャンセルする必要があります。

于 2009-11-25T14:02:05.187 に答える
0

このコードでこの奇妙さを修正しました：

$('a#zoom').mouseover(function() {
    $(this).stop();
});

ありがとうヴィンセント。

于 2009-11-25T15:45:34.980 に答える