CODEWITHSUNDEEP
javascriptjqueryhtml
Blainer
Blainer

Reputation: 2712

.animate() to add margin

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>

Upvotes: 0

Views: 275

Answers (3)

Jashwant
Jashwant

Reputation: 29025

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

Refrence: http://api.jquery.com/animate/

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Like this: (the key is to use the JavaScript property "marginLeft")

 $('.content').animate({
    marginLeft: '+=50'
    }, 5000, function() {
  });

Upvotes: 0

MK_Dev
MK_Dev

Reputation: 3343

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.

Upvotes: 3

Related Questions