You can also animate the multiple properties of an element one by one individually in a queue using the jQuery’s chaining feature. We’ll learn more about chaining in next chapter.

The following example demonstrates a jQuery queued or chained animation, where each animation will start once the previous animation on the element has completed.

Example

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

Animate Properties with Relative Values

You can also define the relative values for the animated properties. If a value is specified with a leading += or -= prefix, then the target value is calculated by adding or subtracting the given number from the current value of the property.

Example

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

Animate Properties with Pre-defined Values

In addition to the numeric values, each property can take the strings 'show', 'hide', and 'toggle'. It will be very helpful in a situation when you simply want to animate the property from its current value to the initial value and vice versa.

Example

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>