Question

我在动画中遇到问题，动画不断滚动，直到用户将鼠标悬停在其中一张图片上。当用户悬停图像时，包含动画的功能再次开始。问题在于，由于动画由边距的大小决定，持续时间设置为静态数字，因此当动画再次开始时，无论边距有多小，它总是需要15000毫秒才能完成。因此，当用户在几乎离开页面时悬停在图像上时，整个动画显着减慢。我是否有关于如何使动画的持续时间相对于边距大小的想法？这是我所谈论的http://nusuth.com/testportfol.html

的链接

HTML

<div class="content-bar">
<div id="bar-child">
    <div class="portthumb"><img src="images/chw1.jpg" width="100%" /></div>
    <div class="portthumb"><img src="images/dg1.jpg" width="100%" /></div>
    <div class="portthumb"><img src="images/chw1.jpg" width="100%" /></div>
</div>

JS

$("#bar-child :first").animate({
        marginLeft: -600,
        }, {
        duration: 15000,
        easing: 'linear',
        complete: function() {
            $(this).css('margin-left', 0).add($(this).last()).appendTo("#bar-child")
            loop()
        }
        })
};

$(document).ready(function() {
loop()  
})

$(".portthumb").hover(function() {
    $("#bar-child :first").stop()
}, function() {
            loop();
});

Answer 1

使用css3动画或过渡而不是使用javascript动画可能是个好主意。 http://learn.shayhowe.com/advanced-html-css/transitions-animations/

回答原始问题：您可以根据保证金计算时间。例如：

duration: 25 * ( 600 + parseInt($("#bar-child :first").css('margin-left')) )

当左边距为0时，持续时间为25 * 600 = 15 000

当左边距为-300时，持续时间为25 *（600-300）= 7 500

停止和启动的水平滚动动画

1 个答案: