jQuery animate-如果另一个动画开始，则停止动画完成 [英] jquery animate - stop animate finishing if another animate begins
问题描述
谁能帮助我更好地理解动画.
我想知道是否可以在运行时停止当前的动画位置.然后从另一个动画功能，将其从当前位置继续到新位置.
很难解释这一点，所以我创建了一个小提琴.
http://jsfiddle.net/motocomdigital/L5uh4/9/
在小提琴中，您会看到一条推文.如果您只是将微博滚动到该推文上，它将为左位置设置动画，从而使整个推文都可以看到.
但是，如果您不发布该推文，它的动画效果将重新开始.
注意:如果该tweet短于可见的twitter区域，则该动画将不会运行.如果发生这种情况，请将小提琴窗口减小到大约以下的大小，然后重新运行小提琴.
我的问题
如果我连续10次在推文上上下徘徊.它希望在队列中一个接一个地运行所有10个动画交替.
我不希望发生这种情况，因此如果我将其悬停在推文上-动画将开始，但是如果我将其悬停(在动画完成之前)，我希望它在当前位置暂停并将动画设置为悬停"位置.而不是堆积队列.但是这项工作反之亦然吗?
有一个简单的方法吗?谢谢
查看我的代码
$("#tweet").tweet({
username: ["seaofclouds", "laughingsquid"],
count: 1,
template: "{text}",
avatar_size: 32
}).bind("loaded", function(){
var visible = $('#tweet ul').width(),
spanTweet = $('span.tweet_text').width();
if ( spanTweet > visible ) {
$('#tweet ul').hover(function() {
$('#tweet ul li').animate({
left : '-' + ( spanTweet - visible ) + 'px'
}, 3000 );
}, function() {
$('#tweet ul li').animate({
left : '0px'
}, 3000 );
});
}
});
在此先感谢您的帮助:)
关于 .stop .
$('#tweet ul li').stop().animate( ... );
我希望这个小提琴是您想要的.
Can anyone help me understand the animate better.
I'm wondering if it is possible to stop an current animate position whilst running. Then from another animate function, carry it on from the current position to the new one.
It's really hard trying to explain this so I've created a fiddle...
The Fiddle
http://jsfiddle.net/motocomdigital/L5uh4/9/
In the fiddle, you will see a tweet. If you simply roll over the tweet it will animate a left positioning, bringing the whole tweet into view.
But the if you roll off the tweet, it animates back to beginning.
Note: The animation will not run if the tweet is shorter than the visible twitter area. If this happens, reduce the fiddle window down to roughly the size below and re-run the fiddle.
My Problem
If I hover on and off the tweet like 10 times in a row. It wants to run the all 10 animate alternations one after the other, in a queue.
I don't want this to happen, I need it so if I hover ON the tweet - the animation begins, but if I hover OFF (before the animation is complete), I would like it pause at it's current location and animate to the hover OFF position. And not stack a queue. But also can this work vice versa?
Is there a simple method to this? Thanks
See My Code
$("#tweet").tweet({
username: ["seaofclouds", "laughingsquid"],
count: 1,
template: "{text}",
avatar_size: 32
}).bind("loaded", function(){
var visible = $('#tweet ul').width(),
spanTweet = $('span.tweet_text').width();
if ( spanTweet > visible ) {
$('#tweet ul').hover(function() {
$('#tweet ul li').animate({
left : '-' + ( spanTweet - visible ) + 'px'
}, 3000 );
}, function() {
$('#tweet ul li').animate({
left : '0px'
}, 3000 );
});
}
});
Thanks in advance for any help on this :)
Just another question about .stop.
$('#tweet ul li').stop().animate( ... );
I hope this fiddle is what you wanted.
这篇关于jQuery animate-如果另一个动画开始，则停止动画完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
