事業部使用動畫功能

Question

我有3個div的&一個按鈕

<div id="Outer"> 
<div id="main" style='height:200px;width:300px'/> 
<div id="child" style='height:20px;'/> 
</div> 

當一些人會點擊該按鈕，然後孩子的div左邊將是-20px逐步 其寬度將增加，直到左側位置改變其寬度變爲主div的寬度，再次點擊按鈕時會發生相反的動作。

我怎麼能做到這一點使用jQuery的動畫功能。謝謝

Answer 1

我不知道你如何選擇你的按鈕，但這會做的伎倆;

$('#yourButtonId').click(function() { 
    var $child = $('#child'), 
     state = $child.data('state'), 
     orgWidth = $child.data('orgWidth'); 
    if(!orgWidth) { 
     $child.data('orgWidth', $child.width()); 
    } 
    if(state != 'big') { 
     $child 
      .data('state', 'big') 
      .animate({left:"-=20px",width:$('#main').width()}); 
    } 
    else { 
     $child 
      .data('state', 'normal') 
      .animate({left:"+=20px",width:orgWidth}); 
    } 
}); 

你可以看到它的工作here。