Question

我有8个缩略图，当你将鼠标悬停在行上的第一个缩略图上时，另外7个缩小到50％的透明度，鼠标移出后会将它们恢复到100％。对于其他人来说同样的事情。

问题在于当你从左到右快速开始你的鼠标时，如果你把它们全部快速地鼠标移动（从左到右或从画廊的左侧到右边），它们会动画并且不要停止因此，如果我有7个缩略图，并且我快速移动REAL，那么它们将播放7xs的动画。如果我快速左转TO，那14个翻转等......（动画堆栈）

指出动画不会停止。我明白了但不确定如何解决它。我尝试了.stop()，但这阻止了整个事情。我也试图减少动画时间，但它已经在500毫秒，所以任何更短，它像一个常规的开/关开关。我也试过.delay（数字在这里），但是，是的，没有工作大声笑。

这是Js小提琴。 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>

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;}

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);
    });

所以我的整体问题是，我怎样才能让它在没有发疯的情况下发挥应有的作用。

Answer 1

尝试使用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/

jQuery .animate问题，动画不会停止（动画堆叠？）

1 个答案: