jQuery动画stop()触发缓出

Question

这是一个普遍的问题.

如果我在元素#elm上有一个jQuery动画,我可以使用它来阻止它 $('#elm').stop()

通常动画会有一个很好的easeIn,easeOut(就像默认的'swing').打电话'停止()'立即停止,当场,看起来有点笨重.调用$('#elm').stop(true,true)使它立即完成动画,一直到终点.

有没有一种通用的方法来告诉元素"改变正在运行的动画,以便它'很快'和'附近',但使用首先定义的easeOut"？

好奇,*-pike

Answer 1

派克,

我不知道做一个"gentle_stop"的完全通用的方法 - 一个可以在任何动画上运行的方式,无论它是如何被初始化的.

下面的代码定义了一个函数gentleStoppable(),它实际上是jQuery自己的.animate(属性,选项)方法的4参数版本.额外的两个参数指定了"平缓 - 停止"阶段.

这是功能:

function gentleStoppable($jQ, animProps, animOptions, stopProps, stopOptions) {
    var namespace = 'gentleStop';
    var dfltStopOptions = {
        duration: 'slow',//override with stopOptions.duration .
        easing: 'easeOutCubic',//override with stopOptions.easing . (See also the safety check applied after extending dfltStopOptions below).
        queue: namespace
    };
    animProps = animProps || {};
    animOptions = animOptions || {};
    stopProps = stopProps || {};
    stopOptions = stopOptions || {};
    $jQ.each(function(i, elem) {
        var $elem = $(elem);
        function killCustomEvent() { $elem.off(namespace); }
        var C = $.Callbacks('once').add(killCustomEvent);
        if(animOptions.complete) {
            C.add(animOptions.complete);
        }
        animOptions.complete = C.fire;
        stopProps = $.extend({}, animProps, stopProps);
        stopOptions = $.extend({}, animOptions, dfltStopOptions, stopOptions);
        stopOptions.easing = ($.easing && $.easing[stopOptions.easing] ) ? stopOptions.easing : 'swing';//just in case what's specifified is unavailable.
        $elem.on(namespace, function() {//custom event
            killCustomEvent();
            C.remove(killCustomEvent);//prevent killCustomEvent being called twice.
            $elem.stop(true,false).animate(stopProps, stopOptions).dequeue(namespace);
        }).animate(animProps, animOptions);
    });
}

启动一个gentleStoppable动画如下:

var animProps = {
    left: '300px'
};
var animOptions = {
    duration: 2000,
    complete: function() {
        console.log('complete');
    }
};
var stopProps = {
    left: '+=15px'
};
var stopOptions = {
    duration: 500,
};
gentleStoppable($e1, animProps, animOptions, stopProps, stopOptions);

然后轻轻地停下来:

$("#elem").trigger('gentleStop');

演示

就目前而言,功能并不完美,我只通过有限的测试.以下是已知问题/改进:

• 方向:表单的stopProps属性xxx:+=15px将无条件地在softstop阶段添加15px,即使它在错误的方向上.例如,如果相应的animProps属性xxx:30px则+=15px假定30px从下面接近目标值.Similaraly,值-=15px将假设从上面接近相应的目标值.对gentleStoppable()的改进将自动调整每个stopProps属性,以允许从低于或高于上方接近其相应的animProps属性.

• 过冲:表单的stopProps属性xxx:+=15px将无条件地在gentlestop阶段添加15px,即使+ 15px采用温和动画超出相应animProps属性中指定的值.如果动画在其自然结束附近停止,则会发生这种情况.对gentleStoppable()的改进会自动阻止每个stopProps的属性导致超出其相应的animProps属性.

• 自动计算:一个毫无疑问的改进是gentleStoppable()根据animProp计算自身的stopProps值.这将使函数通用,更易于使用,并且正确编写将有效地修复Direction和Overshoot问题.

• 稍微考虑一下,代码可以重构为jQuery插件,这将更方便,因为它允许方法链接并避免相当笨拙.trigger(...)的执行温和停止.

如果这是有用的,请使用它.