Question

There’s a demo over here , and here’s my current jQuery is

var height1 = $('.spotlight:nth-child(1)').height();
var height2 = $('.spotlight:nth-child(2)').height();

$('.spotlight').each(function() {
    var spot = $( this ),
        caption = $("<div class='caption'></div>").appendTo(spot);

    caption.load( spot.data('who') + '.html' );
    spot.hover(function() {
    caption.clearQueue().animate({ top :  '-=100px' }, 150)
    }, function () {
      caption.clearQueue().animate({ top : '+=100px' }, 150)
    });
});

$('.spotlight:nth-child(1) .caption').css('top', height1 + 'px');
$('.spotlight:nth-child(2) .caption').css('top', height2 + 'px');

And it all works fine and dandy, but there’s the annoying animation loop if you keep going over it. I tried using .clearQueue() and .stop() but they come with bugs of their own ( if you move fast it goes too low or too high ) Anyway around this?

Answer 1

Can you try stop(false,true) instead of clearQueue() ?

problem is that the clearQueue remove not run items (but you should not have some), and the top property is the top value of the current animation.

stop(false,true) will not clear the queue but jump to the animation end. Then top will be OK