У меня возникают проблемы с анимацией, которая непрерывно прокручивается до тех пор, пока пользователь не наведет над одним из изображений. Когда пользователь наводит курсор на изображение, функция, содержащая анимацию, запускается снова. Проблема заключается в том, что, поскольку анимация определяется размером поля и длительностью устанавливается статическое число, когда анимация запускается снова, она всегда будет занимать 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();
});