home

Jquery animate

Jquery animate() method allow you to create custom animations based on your requirement, you can create animations with different animations and with by using variety of colors. also we have some other type of example code below like Jquery animate() Method with relative values and Jquery animate() Method with predefined values.

$(selector).animate({params},speed,callback);

params parameters specify the css property with values to be animated, and speed will define the speed of the animation and its optional and callback parameter will run after completing current function.

Jquery animate() Method code

<button>click</button>
<div class="animatebox">div animator</div>

.animatebox{
width:140px;
height:100px;
background-color:#f00;
position:absolute;
} <script>
$(document).ready(function(){
$("button").click(function(){
$(".animatebox").animate({
margin: '0px 0px 0px 250px',
});
});
});
</script>
//Jquery Animate() Demo



div animator
//Jquery animate() Method with relative values
     $(document).ready(function() {
         $("button").click(function(){
           $(".animatebox").animate({
              left: '200px',
              top: '200px',
              width:'+=200px',
              height:'+=200px',
        });
    });
});
//Jquery animate() Method with predefined values
     $(document).ready(function() {
         $("button").click(function(){
           $(".animatebox").animate({
            width:'toggle',
            height:'toggle',
        });
    });
});