我有一个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元件。但/有奇怪上淡入淡出效果。

这是我的工作页面。你可以在网上查看。

因此,如何我可以解决这个奇怪?

有帮助吗?

解决方案

的问题是存在的,因为当在变焦的鼠标指针移动的图标它不再被认为在转盘所以淡出踢英寸当淡出完成鼠标指针是突然超过转盘因此淡入再次开始。

我假定奇数行为是眨眼出变焦图标。

要解决这个问题,你必须取消淡出当鼠标移过缩放图标通过添加悬停事件处理程序来缩放图标本身。

其他提示

我固定这个奇怪与此代码:

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

由于文森特。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top