Animation using jQuery

In addition to give an effect using jQuery, we can also do animation using jQuery.

How to animate html element using its stylesheet properties

If we want to animate the html element using its stylesheet properties, we can use animate method and pass parameter and duration as parameters.
In below example, you can see that I am animating "divAnimate1" using animate() method and passsing css stylesheet properties as parameter. In the last I have specified the duration in millisecond that shows that the whole effect should take place in 1500 milliseconds.

<script>
$(document).ready(function() {
    $("#jbtnDiv").click(function() {
    $("#divAnimate1").animate({
        width: "50%",
        opacity: 0.56,
        fontSize: "30pt",
        borderWidth: "5px",
        marginLeft: "150px",
        paddingLeft: "200px"
    }, 1500);
})

$("#jbtnReset").click(function() {
    $("#divAnimate1").animate({
        width: "100%",
        opacity: 1,
        fontSize: "10pt",
        borderWidth: "1",
        marginLeft: "5px",
        paddingLeft: ""
    }, 1500);
})
})
</script>
<div id="divAnimate1" class="demoBlock">Demo text</div>
<input type="button" value="Animate the div" id="jbtnDiv" />
<input type="button" value="Reset" id="jbtnReset" />

In the above code snippet, you must have noticed that css stylesheet properties have been specified using camel case (first character in the lower case and first character of each following word should be in upper case) ie. instead of "margin-left", we should use "margin-Left".

How to queue the animation effect

jQuery also facilitate us to animate several css stylesheet property simultaneously using "queue" parameter. If we specify queue as false, the animation we have specified for a particular element will not be queueed and it will run in parallel with another animation effects.

<script>
    $(document).ready(function() {

        $("#jbtnQueue").click(function() {
            $("#jdivQueue").animate({ height: "50px" }, { queue: false, duration: 1500 })
         .animate({ color: "red" }, { queue: false, duration: 1500 })
         .animate({ borderLeftWidth: "30px" }, { queue: false, duration: 1500 })
         .animate({ padding: "20px" }, { queue: false, duration: 1500 })
         .animate({ fontSize: "30px" }, { queue: false, duration: 1500 })
         .animate({ width: "50%" }, { queue: false, duration: 1500 });
        })

        $("#jbtnNoQueue").click(function() {
            $("#jdivNoQueue").animate({ height: "50px" }, 1500)
         .animate({ color: "red" }, 1500)
         .animate({ borderLeftWidth: "30px" }, 1500)
         .animate({ padding: "20px" }, 1500)
         .animate({ fontSize: "30px" }, 1500)
         .animate({ width: "50%" }, 1500);
        })

        $("#jbtnAll").click(function() {
            $("#jbtnQueue").add("#jbtnNoQueue").click();
        })

        $("#jbtnResetMultiple").click(function() {
            $("#jdivQueue").css({ height: "", color: "black", borderLeftWidth: "1px", padding: "", fontSize: "10pt", width: "100%" });
            $("#jdivNoQueue").css({ height: "", color: "black", borderLeftWidth: "1px", padding: "", fontSize: "10pt", width: "100%" });
            $("#jdivAll").css({ height: "", color: "black", borderLeftWidth: "1px", padding: "", fontSize: "10pt", width: "100%" });
            $("#jdivAll").toggle("slow");
        })
    })
</script>
<div id="jdivQueue" class="demoBlock">jQuery is cool.</div>
<input type="button" value="Animate Simultaneously (not queued)" id="jbtnQueue" />
<div id="jdivNoQueue" class="demoBlock">jQuery is awesome.</div>
<input type="button" value="Animate one by one (queued)" id="jbtnNoQueue" />
<div id="jdivAll" class="demoBlock">jQuery is great.</div>
<input type="button" value="Animate both at one click" id="jbtnAll" />

<input type="button" value="Reset" id="jbtnResetMultiple" />