jQuery动画stop()触发缓动 [英] jQuery animation stop() triggering easeout

问题描述

这是一个通用问题.

如果元素#elm上有jQuery动画，则可以使用$('#elm').stop()

If I have a jQuery animation on an element #elm, I can stop it using $('#elm').stop()

通常，动画将具有一个很好的easyIn，easeOut(如默认的"swing").调用"stop()"立即停止它，看起来有点笨拙.调用$('#elm').stop(true,true)使其立即完成动画，一直到终点.

Usually the animation will have a nice easeIn, easeOut (like the default 'swing'). Calling 'stop()' stops it right away, on the spot, looking a bit clunky. Calling $('#elm').stop(true,true) makes it finish the animation right away, all the way to the end point.

是否存在一种通用方法来告诉元素更改正在运行的动画，使其停止很快"和附近"，但首先使用easyOut定义"?

Is there a generic approach to tell an element to "change the running animation so that it will stop 'soon' and 'nearby', but use the easeOut as defined first" ?

很好奇， *-派克

推荐答案

派克(Pike)，

我不知道做"gentle_stop"的一种完全通用的方法-无论动画是如何初始化的，这种方法都可以在任何动画上运行.

I don't know of a totally generic way to do a "gentle_stop" - one that will operate on any animation regardless of how it was intialised.

下面的代码定义了函数gentleStoppable()，实际上它是jQuery自己的 .animate(属性，选项)方法.额外的两个参数指定了柔和停止"阶段.

The code below, defines the function gentleStoppable() which is, in effect, a 4-parameter version of jQuery's own .animate( properties, options ) method. The extra two paramters specify the "gentle-stop" phase.

这是功能:

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);
    });
}

按如下所示启动一个gentlyStoppable动画:

Initiate a gentleStoppable animation as follows :

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');

演示

就目前而言，该功能并不完美，我仅对其进行了有限的测试.以下是已知的问题/改进:

As it stands, the function isn't perfect and I have put it through only limited testing. Here are the known issues/improvements:

• 方向:格式为xxx:+=15px的stopProps属性将在条件停止阶段无条件添加15px，即使方向错误也是如此.例如，如果相应的animProps属性为xxx:30px，则+=15px将假定从下面开始接近30px的目标值.类似地，值-=15px将假定从上方接近相应的目标值.对smoothStoppable()的改进将自动调整每个stopProps属性，以允许从下方或上方接近其对应的animProps属性.

• Direction: A stopProps property of the form xxx:+=15px will unconditionally add 15px in the gentlestop phase, even if it is in the wrong direction. For example, if the corresponding animProps property was xxx:30px then +=15px would assume the target value of 30px was being approached from below. Similaraly, a value of -=15px would assume the corresponding target value was being approached from above. An improvement to gentleStoppable() would automtically adjust each stopProps property to allow its corresponding animProps property to be approached from below OR above.

超调:xxx:+=15px格式的stopProps属性将在柔和停止阶段无条件添加15px，即使+ 15px使柔和动画超出了相应animProps属性中指定的范围.如果动画在其自然结束附近停止，则会发生这种情况.改进smoothStoppable()会自动防止每个stopProps的属性导致超出其对应的animProps属性.

Overshoot: A stopProps property of the form xxx:+=15px will unconditionally add 15px in the gentlestop phase, even if +15px takes the gentle animation beyond what is specified in the corresponding animProps property. This will tend to occur if the animation is stopped near its natural end. An improvement to gentleStoppable() would automtically prevent each stopProps' property from causing its corresponding animProps property being exceeded.

自动计算:毫无疑问，改进的是，基于animProps，gentleStoppable()为其自身计算stopProps值.这样一来，该功能将变得通用，易于使用，并且编写正确，将可以有效解决方向"和过冲"问题.

Auto-caluculation: An undoubted improvement would be for gentleStoppable() to calculate stopProps values for itself, based on animProps. This would make the function general, simpler to use and, written correctly, would effectively fix the Direction and Overshoot issues.

稍加思考，就可以将代码重构为jQuery插件，这将更加方便，因为它将允许方法链接并避免笨拙的.trigger(...)执行平缓的停止.

With a little more thought the code could be refactored as a jQuery plugin, which would be more convenient as it would allow method chaining and avoid the rather clumsy .trigger(...) to perform a gentle stop.

如果有什么用，请使用.

If this is of any use, then please use it.

这篇关于jQuery动画stop()触发缓动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！