0

我有 8 个缩略图，当您将鼠标悬停在该行的第一个缩略图上时，其他 7 个将动画设置为 50% 的透明度，鼠标移出时它会将它们恢复为 100%。其他拇指也一样。

问题是，当您从左到右快速开始鼠标悬停时，如果您将鼠标全部快速（从左到右或认为，从画廊的左侧到右侧），它们会动画并且不会停止。因此，如果我有 7 个缩略图，并且我将鼠标真正快速地悬停在它们上，那么它们将播放动画 7xs。如果我从左到右快速翻转，那就是 14 次翻转等....（动画堆栈）

关键是动画不会停止。我明白为什么但不知道如何解决它。我试过了，.stop()但这阻止了整个事情。我还尝试缩短动画时间，但它已经在 500 毫秒，所以任何更短的时间，它就像一个常规的开/关开关。我也试过 .delay(number here) 但好吧，没用，哈哈。

这是 Js Fiddle。http://jsfiddle.net/somdow/y3vCP/

以防万一，

此示例的 HTML（与 jsFiddle 相同）为：

    <div class="portThumbsL">
         <a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/2882.png" alt="2882films"/></a>
        <div class="thumbTxtSmall">2882FILMS</div>
    </div>
    <div class="portThumbsL">
        <a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/1tech.png" alt="1-tech"/></a>
         <div class="thumbTxtSmall">2882FILMS</div>
    </div>
    <div class="portThumbsL">
        <a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/brazen.png" alt="brazen"/></a>
         <div class="thumbTxtSmall">2882FILMS</div>
    </div>

​</p>

CSS是：

.portThumbsL{position:relative; width:245px; height:387px; float:left; background-color:#333; margin-right:14px;}
.portThumbsR{position:relative;width:245px; height:387px; float:right; background-color:#333; margin-left:px;}
.portThumbsL img, .portThumbsR img{display:block; margin:6px auto;}

​</p>

jQuery是：

$('.portThumbsL ,  .portThumbsR').hover(function(){
    $(this).children('.portSecRollOver').css("display","block");
    $(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr('alt') + "</h3>");
    //$('.portThumbsL,  .portThumbsR').not(this).css("opacity", .5);
    $('.portThumbsL,  .portThumbsR').not(this).animate({opacity:.5},500);
    }, 
    function(){
        $(this).children('.portSecRollOver').css("display","none");
    $('.portThumbsL,  .portThumbsR').not(this).animate({opacity:1},500);
    });

所以我的总体问题是，我怎样才能让它发挥应有的作用而不会发疯。

4

1 回答 1

0

尝试使用 stop() 然后 clearQueue() ...

$('.portThumbsL, .portThumbsR').not(this) .stop().clearQueue() .animate({opacity: .5},500);

$('.portThumbsL, .portThumbsR').not(this) .stop().clearQueue() .animate({opacity: 1}, 500);

看这里... http://jsfiddle.net/dZY7q/

于 2012-09-15T15:55:10.783 回答