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