CODEWITHSUNDEEP
jqueryanimation
Staysee
Staysee

Reputation: 1907

Reusing jQuery animate parameters

Is there any way to reuse the parameters for the following code? I would like to set duration: 750, easing: 'easeOutBack', queue: false only once instead of on each animation.

    $("#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
         });
    });

Upvotes: 0

Views: 133

Answers (4)

PlantTheIdea
PlantTheIdea

Reputation: 16359

You can clean it up a lot more than that:

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

This allows easy modification of the parameters if you want to customize one or more later, and also allows for easy application to other items.

If you wanted to simplify it knowing it won't be customized later::

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

Upvotes: 0

user571545
user571545

Reputation:

make an object in a parent function:

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

Then place that in the animate functions as the second argument

Upvotes: 0

adeneo
adeneo

Reputation: 318192

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

Upvotes: 2

Zbigniew
Zbigniew

Reputation: 27594

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

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

Upvotes: 0

Related Questions