.animate(), um den Rand hinzuzufügen

Question

Ich benutze den Code, um Rand zu einem Div auf Klick hinzuzufügen. Es funktioniert perfekt, aber ich möchte es "animieren", wenn es einen Rand für einen Gleiteffekt hinzufügt. Wie würde ich .animate() verwenden, um dies zu erreichen?

<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

tun:

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

wo 300 die linke Rand Breite und 1000 ist die Anzahl von Millisekunden zu animieren. Wenden Sie dieselbe Logik an, um die umgekehrte Animation auszuführen. Weitere Informationen finden Sie unter .

Answer 2

wie folgt aus: (der Schlüssel ist, um die JavaScript-Eigenschaft "margin" verwenden)

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

Answer 3

<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: