Animare l'interruttore a sinistra di div usando jQuery?

Question

Ho cercato di imitare il codice degli altri ma senza fortuna. Come posso ottenere Div1 per commutare margin-left: 30% quando si fa clic su DivButton? Grazie.

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

È possibile utilizzare un'animazione jQuery.

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

Answer 3

Prova questo:

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

JSFiddle Demo