使用jQuery为div设置动画切换边距？

Question

我一直试图模仿别人的代码,但没有运气.如何让Div1切换边距左边:点击DivButton时为30%？谢谢.

http://jsfiddle.net/3nc62rec/

HTML

<div id="Div1"></div>
<br><br>
<div id="DivButton"></div>

CSS

#Div1{
    background:blue;
    width:50%;
    height:50px;
    margin-left:0%;
}

#DivButton{
    background:green;
    width:20px;
    height:20px;
}

JS

$('#DivButton').click(function(){                

});


/* 
var toggleWidth = $("#Div1").width() == 365 ? "98%" : "365px"; 
$('#Div1').animate( {'width': toggleWidth}, 300, resize); 
*/

/* 
var toggleMargin = $("#Div1").marginLeft() == 30% ? "10%" : "30%"; 
$('#Div1').animate( {'margin-left': toggleMargin}, 300, resize); 
*/

Answer 1

var $div1 = $('#Div1')
$('#DivButton').click(function() {
  $div1.toggleClass('isOut')
  var isOut = $div1.hasClass('isOut')
  $div1.animate({marginLeft: isOut ? '30%' : '0'}, 300)
})

http://jsfiddle.net/3nc62rec/2/