假設你有一個很長的動畫，你正在改變width：jQuery的動畫：改變動畫參數中旬動畫
var myTargetWidth = 500;
$(el).animate({ "width" : myTargetWidth }, 5000);
動畫是異步的所以你的代碼繼續。 。 。 幾秒鐘後，您決定將目標width更改爲300。 。 。 此時動畫仍在運行。 。 。
如何將targetWidth更改爲運行動畫上的其他值？
一種選擇是使用了jQuery animate函數（API） 提到step功能動畫正在運行時，檢查的條件。
實施例的jsfiddle：http://jsfiddle.net/GweLA/13/
JS
var myTargetWidth = 500;
$(document).ready(function(){
$('.sample').animate({ "width" : myTargetWidth },{
duration : 5000,
step: function(now, fx) {
if($(this).width() > 200){
myTargetWidth = 300;
$(this).stop().animate({ "width" : myTargetWidth },1000);
}
}
});
});
CSS
.sample{
width:20px;
height:100px;
background-color:#cccccc;
}
HTML
<div class="sample">
width is supposed to be animated till 500 but it stops at 300
</div>
解決方案2：
一些研究，我發現，我們可以通過修改傳遞給階躍函數來控制動畫fx參數的start和end屬性之後。這種平滑的動畫，但不是一個很乾淨的做法。
例的jsfiddle：http://jsfiddle.net/GweLA/57/
JS
var myTargetWidth = 500;
var isExecuted = false;
$(document).ready(function(){
$('.sample').animate({ "width" : myTargetWidth },{
duration : 5000,
queue : false,
step: function(now, fx) {
//So that fx.start and fx.end is set only once
if($(this).width() > 200 && $(this).width() < 203){
if(!isExecuted){
fx.start = now-65;
fx.end = 300;
}
isExecuted = true;
}
}
});
});
您可以使用組合.stop() - 停止動畫。
:animated選擇 - 如果當前元素被動畫，檢查..
試試這個
HTML
<div class="a">
</div>
<button id="check">Check Animation </button>
的Javascript
var myTargetWidth = 300;
var $el = $('.a')
$el.animate({
"width": myTargetWidth
}, 5000);
$('#check').on('click', function() {
var newHeight = 300;
if ($('.a:animated')) {
$el.stop().animate({
"height": newHeight
}, 5000);
}
});
綜觀jQuery的github上effects.js你將不得不轉讓後改變變量問題
來源：https://github.com/jquery/jquery/blob/master/src/effects.js
注意：注意.animate的分配新建分配FY和對象創建動畫（工作馬）
animate: function(prop, speed, easing, callback) {
var empty = jQuery.isEmptyObject(prop),
optall = jQuery.speed(speed, easing, callback),
doAnimation = function() {
// Operate on a copy of prop so per-property easing won't be lost
var anim = Animation(this, jQuery.extend({}, prop), optall);
// Empty animations resolve immediately
if (empty) {
anim.stop(true);
}
};
return empty || optall.queue === false ?
this.each(doAnimation) :
this.queue(optall.queue, doAnimation);
}
//動畫在e ffects.js
function Animation(elem, properties, options) {
var result,
index = 0,
length = animationPrefilters.length,
deferred = jQuery.Deferred().always(function() {
// don't match elem in the :animated selector
delete tick.elem;
}),
tick = function() {
var currentTime = fxNow || createFxNow(),
remaining = Math.max(0, animation.startTime + animation.duration - currentTime),
// archaic crash bug won't allow us to use 1 - (0.5 || 0) (#12497)
temp = remaining/animation.duration || 0,
percent = 1 - temp,
index = 0,
length = animation.tweens.length;
for (; index < length ; index++) {
animation.tweens[ index ].run(percent);
}
deferred.notifyWith(elem, [ animation, percent, remaining ]);
if (percent < 1 && length) {
return remaining;
} else {
deferred.resolveWith(elem, [ animation ]);
return false;
}
},
animation = deferred.promise({
elem: elem,
props: jQuery.extend({}, properties),
opts: jQuery.extend(true, { specialEasing: {} }, options),
originalProperties: properties,
originalOptions: options,
startTime: fxNow || createFxNow(),
duration: options.duration,
tweens: [],
createTween: function(prop, end) {
var tween = jQuery.Tween(elem, animation.opts, prop, end,
animation.opts.specialEasing[ prop ] || animation.opts.easing);
animation.tweens.push(tween);
return tween;
},
stop: function(gotoEnd) {
var index = 0,
// if we are going to the end, we want to run all the tweens
// otherwise we skip this part
length = gotoEnd ? animation.tweens.length : 0;
for (; index < length ; index++) {
animation.tweens[ index ].run(1);
}
// resolve when we played the last frame
// otherwise, reject
if (gotoEnd) {
deferred.resolveWith(elem, [ animation, gotoEnd ]);
} else {
deferred.rejectWith(elem, [ animation, gotoEnd ]);
}
return this;
}
}),
props = animation.props;
propFilter(props, animation.opts.specialEasing);
for (; index < length ; index++) {
result = animationPrefilters[ index ].call(animation, elem, props, animation.opts);
if (result) {
return result;
}
}
createTweens(animation, props);
if (jQuery.isFunction(animation.opts.start)) {
animation.opts.start.call(elem, animation);
}
jQuery.fx.timer(
jQuery.extend(tick, {
anim: animation,
queue: animation.opts.queue,
elem: elem
})
);
// attach callbacks from options
return animation.progress(animation.opts.progress)
.done(animation.opts.done, animation.opts.complete)
.fail(animation.opts.fail)
.always(animation.opts.always);
}
因此，我認爲你將不得不.stop與改變的變量進行重新排隊的動畫，你在訪問中關閉任何變量的希望不大（有人糾正我，請）
我加入這裏的例子：
嘗試點擊 '點擊這裏' 元素中旬動畫...
我使用clearQueue()和stop()函數。
CSS #block {width：100px; height：100px;背景：紅色; }
HTML
<p>
<a id="clickme">Click here</a>
</p>
JQUERY
$('#clickme').not('.again').on('mouseup',function() {
$(this).addClass('again');
$('#block').animate({
width: '400'
}, 5000, function() {
// Animation complete.
});
});
$('.again').live('mousedown', function() {
$(this).removeClass('again');
$('#block').clearQueue().animate({
width: '200',
}, 500, function() {
$('#block').stop(true, false);
});
});
<div id="block" />
你嘗試過改變myTargetWidth中旬動畫，看看會發生什麼？我認爲它不會做任何事情，因爲內部它將被存儲，在這種情況下，您將不得不查看是否可以解密jQuery源以查看如何訪問該中間流參數。 –
是的，如果是的話，你應該接受一個正確的答案！你有很多開放的問題@eeejay – superUntitled
是的eeejay ...標記爲您工作的答案是正確的，這是整個網站的重點。另外看看提到步驟（而不是.stop）的答案......它幾乎肯定比你的問題更適合.stop回答 –