0

私は8つのサムネイルを持っており、行の最初のサムネイルの上にマウスを置くと、他の7つは50％の透明度にアニメーション化され、マウスを外すと100％に戻ります。他の親指についても同じです。

問題は、マウスオーバーを左から右にすばやく開始するときに、すべてを非常に速く（左から右に、またはギャラリーの左側から右側に）マウスオーバーすると、アニメーション化されて停止しないことです。したがって、サムネイルが7つあり、それらの上にマウスをすばやく置くと、アニメーションが7倍再生されます。左から右に高速でロールオーバーすると、14回のロールオーバーなどになります...（アニメーションスタック）

ポイントは、アニメーションが止まらないということです。そして、私は理由を理解しましたが、それを修正する方法がわかりません。私は試しました.stop()が、それですべてが止まりました。アニメーションの時間も短縮しようとしましたが、すでに500msなので、通常のオン/オフスイッチのように短くなっています。.delay（number here）も試しましたが、うまくいきませんでした。

これが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>

</ 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({不透明度: .5},500);

$('.portThumbsL, .portThumbsR').not(this) .stop().clearQueue() .animate({不透明度: 1}, 500);

ここを参照してください... http://jsfiddle.net/dZY7q/

于 2012-09-15T15:55:10.783 に答える