Jquery。動畫寬度問題

Question

在此先感謝任何幫助，我會盡力解釋它。

我有一個1000px寬度和220px高度的容器，在這裏我將有三列220px的高度但寬度不同（77px，200px和300px）。當你點擊一個div時，它會打開到一個固定的大小（每個都是相同的，例如400px），其他未被點擊的大小會縮回到它們的原始大小（77px，200px和300px）。就像一個不同寬度的手風琴......

我的jquery已經到了那裏，但並不完全，我知道如何創建一個點擊事件，我知道從那裏我需要收縮一切，但我點擊回它們的信號大小。我完成了，但讓點擊擴大到它需要的大小。

jsfiddle here!

$(document).ready(function(){ 
// Your code here 
$('.section').click(function() { 
    $('.section').not(this).animate({width:"77px"},400); 
    //alert('clicked!'); 
    $(this).animate({width:"400px"},400); 
}); 
}); 

<div id="pictureNavContainer"> 

<div class="section pictureSectionOne" id="1"></div> 
<div class="section pictureSectionTwo" id="2"></div> 
<div class="section pictureSectionThree" id="3"></div> 

</div> 

<style> 
#pictureNavContainer{background-color:#262626; width:1000px; height:220px; overflow:hidden;} 
.pictureSectionOne{float:left; background:yellow; height:220px; width:77px;} 
.pictureSectionTwo{float:left; background:red; height:220px; width:177px;} 
.pictureSectionThree{float:left; background:blue; height:220px; width:400px;} 
</style> 

我想通了一種解決方案：

<script> 
$(document).ready(function(){ 
    // Your code here 
    $('.section').click(function() { 



     $('#1').animate({width:"50px"},400); 
     $('#2').animate({width:"100px"},400); 
     $('#3').animate({width:"200px"},400); 

     //alert('clicked!'); 
     $(this).animate({width:"400px"},400); 
    }); 
}); 
</script> 

但心不是代碼非常好的..但它的工作原理

此：

$(function(){ 

    var $sections = $('.section'); 
    var orgWidth = []; 

    var animate = function() { 
     var $this = $(this); 
     $sections.not($this).each(function(){ 
      var $section = $(this), 
       org = orgWidth[$section.index()]; 
      $section.animate({ 
       width: org 
      }, 400); 
     }); 
     $this.animate({ 
      width: 400 
     }, 400); 
    }; 

    $sections.each(function(){ 
     var $this = $(this); 
     orgWidth.push($this.width()); 
     $this.click(animate); 
    }); 
}); 

Answer 1

好的，我想我已經開始工作了。像this？

但是，這不會將單擊的元素設置爲固定大小，而是設置爲剩下的大小。如果將單擊元素的大小調整爲固定大小，那麼三列將變得更寬或更薄，然後是1000px，那真的是你想要的嗎？

Here是一個更新的例子。這正是你所要求的，但我不確定這是你想要的。

代碼行內註釋：

$(function(){ 
    // we cache the result set from the selector so we can 
    // reuse them without having to query the DOM again 
    var $sections = $('.section'); 

    // placeholder array for original widths 
    var orgWidth = []; 

    // handler function to take care of the animations 
    var animate = function() { 
     var $this = $(this); 
     // iterate through all but current element 
     $sections.not($this).each(function(){ 
      // create jQuery object and fetch original width 
      var $section = $(this), 
       org = orgWidth[$section.index()]; 
      // animate current element 
      $section.animate({ 
       width: org 
      }, 400); 
     }); 
     // animate current element 
     $this.animate({ 
      width: 400 
     }, 400); 
    }; 

    // let's iterate through each of the elements 
    $sections.each(function(){ 
     // create jQuery object for current element 
     var $this = $(this); 
     // push the elements width into the placeholder 
     orgWidth.push($this.width()); 
     // bind the handler to the click event 
     $this.click(animate); 
    }); 
});