0

作为jQuery animate函数调用的一部分，有时我想阻止动画。作为animate功​​能的一部分，有没有办法阻止动画？比如before有财产？

我想做这样的事情：

$('#myMovingDiv').animate(
{
    before: // RUN A FUNCTION, IF FUNCTION RETURNS TRUE, CANCEL ANIMATION
    left: '+=100'
}
, 1000, function(){});

为了解决下面的评论，我不能只if在动画之前做 an，因为动画会改变 的值if，如果动画不完整，if则不满足条件。例子 -

//THIS WILL NOT WORK IF ANIMATION IS NOT FINISHED BEFORE 2ND CLICK
$("#myClickableDiv").click(function () {
    if (document.getElementById(myMovingDiv').offsetLeft == 0) {

       $('#myMovingDiv').animate({
           left: '+=850'
       }, 400, function () {
        // Animation complete.
       });

    };
});
4

3 回答 3

1

我认为不可能，但是您可以使用以下方法开发解决方案.filter()

$('#myMovingDiv').filter(function(idx, el){
    return true;// or false based on condition
}).animate({
     left: '+=100'
 }, 1000, function () {});

或者为什么不在调用 animate 方法之前放置一个 if 条件

if(condition){
    $('#myMovingDiv').animate({
         left: '+=100'
     }, 1000, function () {});
}
于 2013-07-04T03:38:08.020 回答
1

取决于您到底要做什么。如果是为了防止属性被动画化，在这种情况下left，那么你可以使用 jQuery animate 的 step function.

$(function () {
    $('button').click(function () {
        $('#myMovingDiv').animate({
            left: '+=100'
        }, {
            step: function (now, fx) {
                if(parseInt(now) > 20){
                    $(this).stop(); 
                    fx.end = fx.start; //prevents div from moving
                }
            }
        },
        1000);
    });
});

演示：http: //jsfiddle.net/qhzVm/3/

于 2013-07-04T03:55:03.337 回答
1

我认为这是一个奇怪的要求，因为你可以只做一个if，但如果你绝对想要一个before选项，把这个脚本放在你的代码中：

(function($){
    $.fn.oldAnim = $.fn.animate;
    $.fn.animate = function(){
        var args = arguments;
        if(typeof args[1] == 'object'){
            if(args[1].before){
                var callBefore = args[1].before().apply(this);
                if(callBefore || callBefore == undefined){
                    return this.oldAnim.apply(this, args);
                }else{
                    return this;
                }
            }
        }
        return this.oldAnim.apply(this, args);
    }
})(jQuery)

然后你会有一个before选择。返回 false、0、null 或空字符串将取消动画。但是，返回 undefined 将触发动画。

你可以这样称呼它：

$('selector').animate({'hegit' : 'value'}, {before : function(){}, complete : function(){} /*etc, etc*/})

小提琴：http: //jsfiddle.net/cWC5B/1/

于 2013-07-04T04:22:25.583 回答