-2

I want to have a slotmachine-like animation when you hover over the image. I also want it to revert to the starting state when you leave the area. I managed to stop the animation when you leave and start when you hover but there are two problems.

  1. The animation overlaps each other because of the hover constantly activating it.
  2. The animation doesn't end at the starting position. (I don't know how to do that.)

My knowledge is total newb level but here's what I got so far with bits of code here and there.I don't know how all of this works.

Please help me out! Thanks!

jsfiddle.net/Bn7Kq/63/

4

1 に答える 1

0

The problem is that the .mouseover() and .mouseout() events trigger even when you hover over descendants of the elements to which the events are bound. So essentially, you were processing multiple doScroll loops as the marqueeElement items passed under the mouse cursor.

To fix this, and only trigger once for the actual bound element, use .mouseenter() and .mouseleave() instead.

var el = $(".mholder").mouseenter(function(){
    isHovering = true;
    var countScrolls = $('.mholder .marqueeElement').length;

    for (var i=0; i < countScrolls; i++) {
       doScroll($('.mholder .marqueeElement:nth-child(' + i + ')'));
    }
}).mouseleave(function(){
    isHovering = false;
    i=countScrolls+10;
});

DEMO

于 2013-03-08T22:06:13.837 に答える