Question

I have 8 thumbnails and when you mouse over the first one on the row, the other 7 animate to transparency of 50%, on mouse out it brings them back to 100%. The same thing for the other thumbs.

The problem is that when you begin your mouseovers quickly from left to right, if you mouse over them all real fast(from left to right or think, from left side of the gallery to the right ), they animate and don’t stop. So if I have 7 thumbnails, and I mouse overthem REAL fast, then theyll play the animation 7xs. If I rollover fast left TO right, thats 14 rollovers etc….(animations stack)

point being that the animations don’t stop. And I get why but not sure how to fix it.
I tried the .stop() but that stopped the whole thing. I also tried to cut down the animation time but its already at 500ms so anything shorter and its like a regular on/off switch. I also tried .delay(number here) but well yeah, didnt work lol.

Here is the Js Fiddle. http://jsfiddle.net/somdow/y3vCP/

just in case,

The HTML for this example (same as jsFiddle) is:

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

​

The Css is:

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

​

The jQuery is:

$('.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);
    });

​So my overall question is, How can I make it so that it plays as it should without going crazy.

Answer 1

try using stop() then clearQueue() …

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

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

see here …
http://jsfiddle.net/dZY7q/