Question

有没有办法重用以下代码的参数？我想只设置一次duration: 750, easing: 'easeOutBack', queue: false而不是每个动画。

    $("#box1").hover(function(){
        $("#slide").animate({ left: "0" },{
            duration: 750,
            easing: 'easeOutBack',
            queue: false
         });
        $("#arrow").animate({ left: "-20px" },{
            duration: 750,
            easing: 'easeOutBack',
            queue: false
         });
    });
    $("#box2").hover(function(){
        $("#slide").animate({ left: "-200px" }, {
            duration: 750,
            easing: 'easeOutBack',
            queue: false
         });
        $("#arrow").animate({ left: "-40px" },{
            duration: 750,
            easing: 'easeOutBack',
            queue: false
         });
    });

Answer 1

var obj = {
            duration: 750,
            easing: 'easeOutBack',
            queue: false
         };

$("#box1").hover(function(){
    $("#slide").animate({ left: "0" }, obj);
    $("#arrow").animate({ left: "-20px" }, obj);
});

$("#box2").hover(function(){
    $("#slide").animate({ left: "-200px" }, obj);
    $("#arrow").animate({ left: "-40px" }, obj);
});

Answer 2

var animParams = {
            duration: 750,
            easing: 'easeOutBack',
            queue: false
         };

$("#slide").animate({ left: "0" }, animParams);
$("#arrow").animate({ left: "-20px" }, animParams);

Answer 3

在父函数中创建一个对象：

var mySettings = {
            duration: 750,
            easing: 'easeOutBack',
            queue: false
         }

然后将其作为第二个参数放在动画函数中

Answer 4

你可以将它清理得更多：

function animateWithEase($id,$left,$duration,$easing,$queue){
    $id.animate({left:$left},{
        duration:$duration,
        easing:$easing,
        queue:$queue
    });
}

$("#box1").hover(function(){
    animateWithEase($('#slide'),0,750,'easeOutBack',false);
    animateWithEase($('#arrow'),-20,750,'easeOutBack',false);
});
$("#box2").hover(function(){
    animateWithEase($('#slide'),-200,750,'easeOutBack',false);
    animateWithEase($('#arrow'),-40,750,'easeOutBack',false);
});

如果您想稍后自定义一个或多个参数，则可以轻松修改参数，并且还可以轻松应用于其他项目。

如果你想简化它，因为它不会在以后定制::

function animateWithEase($id,$left){
    $id.animate({left:$left},{
        duration:750,
        easing:'easeOutBack',
        queue:false
    });
}

$("#box1").hover(function(){
    animateWithEase($('#slide'),0);
    animateWithEase($('#arrow'),-20);
});
$("#box2").hover(function(){
    animateWithEase($('#slide'),-200);
    animateWithEase($('#arrow'),-40);
});

重用jQuery动画参数

4 个答案: