0

関数の呼び出しの一環としてjQuery animate、アニメーションを防止したい場合があります。関数の一部としてanimate、アニメーションを防止する方法はありますか? 物件beforeとか？

私はこのようなことをしたいと思います:

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

以下のコメントに対処するために、アニメーションの前に を実行することはできませんif。なぜなら、アニメーションは の値を変更し、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

正確に何をしようとしているかによって異なります。プロパティがアニメーション化されないようにすることが問題である場合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 に答える
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 に答える