使用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/

Answer 2

您可以使用jquery动画。

  $('#DivButton').animate({marginleft: "30%"}, 500);

Answer 3

试试这个：

$('#DivButton').click(function () {
    $("#Div1").animate({
        marginLeft: '30%'
    }, 500);
});

JSFiddle演示