I rarely use jquery, but I wanted to add animation to a side bar. The sidebar menu is 670px with a -670 left-margin. When the user hovers over it, I'd like the left-margin to change to 0px and reveal the hidden content. Upon mouseout, it should return to -670. It seems that my code could have worked if I were dealing with the margin as a whole, rather than just specifying the left-margin property. However, errors occur when I try to specify only the left-margin. What other options do I have?
Currently, I have "margin" instead of "left-margin" in my code as a placeholder. Here's what I have written so far:
<script type="text/javascript">
// Pull out menu
$(document).ready(function() {
$('#left_menu').mouseover(function() {
$('#left_menu').animate({
margin: 0
}, 1000, function() {
});
});
// Close menu
$('#left_menu').mouseout(function() {
$('#left_menu').animate({
margin:-670
}, 1000, function() {
});
});
});
</script>