jQuery 动画问题

Question

这里 有一个演示，这是我当前的 jQuery

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

，一切都工作得很好，但是有如果你继续看下去，就会出现烦人的动画循环。我尝试使用 .clearQueue() 和 .stop() 但它们也有自己的错误（如果你移动得很快，它会太低或太高）无论如何？

Answer 1

您可以尝试 stop(false,true) 而不是 clearQueue() 吗？

问题是clearQueue删除未运行的项目（但你不应该有一些），并且top属性是当前动画的顶部值。

stop(false,true) 不会清除队列，而是跳转到动画结束。然后top就OK了

Answer 2

也许您应该改用 .animate 函数。

http://api.jquery.com/animate/

Answer 3

部分问题可能是动画被定义为增量 (-=100px)。如果此动画被激活多次，它将继续爬行您的 div。我了解您正在尝试阻止动画被多次激活。我能够使用绝对位置重新编码。我没有看到问题。在这里查看：

http://jsfiddle.net/waDVX/

这是代码：

HTML

<div class="spotlight" data-who="staff"> 
    <div class="caption">
        <h1>Lipsum</h1>
        <p> There are many variations of passages of Lorem Ipsum available</p>
    </div>      
</div> 

<div class="spotlight" data-who="student"> 
    <div class="caption">
        <h1>Test</h1>
        <p>testtestt estte stte sttest testte sttesttestt esttestte sttest</p>
    </div>
</div> 

CSS

* {
    margin:0;
    padding:0;
}

.spotlight {
    position:relative;
    overflow:hidden;
    width:270px;
    float:left;
    margin:20px;
    height:240px;
    background:#008ad0;
}
.caption {
   position:relative;
   opacity: 0.8;
   padding:10px;
   background:#000;
   color:#fff;
}

jQuery

$(function() {
    $('.spotlight').each(function() {
        var spot = $(this);
        var spotHeight = spot.outerHeight();
        var caption = $(".caption", spot);
        var height = caption.outerHeight();
        var top2 = spotHeight - height;
        var top1 = spotHeight;
        caption.css({top:top1});
        spot.hover(function() {
            caption.stop().animate({ top:top2 }, 150);
        }, function() {
            caption.stop().animate({top:top1}, 150);
        });
    });

});

注意：为了简单起见，我删除了字幕的 AJAX 加载。