重用jQuery动画参数

重用jQuery动画参数,jquery,animation,Jquery,Animation,有没有办法重用以下代码的参数?我想设置持续时间:750, 放松:“轻松内地”, 队列:false仅一次,而不是在每个动画上 $("#box1").hover(function(){ $("#slide").animate({ left: "0" },{ duration: 750, easing: 'easeOutBack', queue: false }); $("

有没有办法重用以下代码的参数?我想设置
持续时间:750,
放松:“轻松内地”,
队列: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
         });
    });

在父函数中生成对象:

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

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

您可以对其进行更多清理:

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

@j08691-我想该轮到我了!哇,你们真快!我试过类似的方法,但我想我的语法错了。谢谢你的快速回复!我会尽快接受你的答复。
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);
});