Question

我有这样的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元素。但是fadein / out效应很奇怪。

This is my work page。您可以在线查看。

那我怎么能解决这个奇怪的问题？

Answer 1

问题出现了，因为当鼠标指针在缩放图标上方移动时，不再考虑旋转木马，因此fadeOut会启动。当淡出完成时，鼠标指针突然在旋转木马上方，因此fadein会再次启动。 / p>

我认为奇怪的行为是缩放图标的闪烁。

要解决此问题，您必须通过向缩放图标本身添加悬停事件处理程序，在鼠标移动到缩放图标上时取消淡出。

Answer 2

我用这段代码解决了这个奇怪的问题：

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

感谢文森特。

jQuery悬停问题

2 个答案: