Jquery .Animate Widthの問題

Question

これについての助けを前もってありがとうございます。私はそれをうまく説明しようとします。

私は1000px幅と220px高さのコンテナを持っていますが、これには高さが220pxですが、幅が異なる（77px、200px、300px）3つの列があります。 1つの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のように？

ただし、クリックされた要素は固定サイズではなく、残されたサイズに設定されます。クリックした要素のサイズを固定サイズに変更すると、3つの列が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); 
    }); 
});