Question

I am using the code to add margin to a div on click. It works perfectly, but I want to make it “animate” when it is adding margin for a sliding effect. How would I use .animate() to accomplish this?

<script type='text/javascript'>
$(document).ready(function () {
    $('.menub').click(function() {
        if ($('.content').css('margin-left') == '300px')
        {
            $('.content').css('margin-left', '0px');
        }
        else {
            $('.content').css('margin-left', '300px');
        }
    });
    $('.navigation a li').click(function() {
        $('.content').css('margin-left', '0px');
    });
});
</script>

Answer 1

Do this:

​$('.content').animate({marginLeft: 300}, 1000);​​​​​

where 300 is the left margin width and 1000 is the number of milliseconds to animate. Apply same logic to do the reverse animation. See http://api.jquery.com/animate/ for more info.