Jquery .Animate 宽度问题

Question

预先感谢您对此提供的任何帮助，我会尽力解释清楚。

我有一个宽度为 1000 像素、高度为 220 像素的容器，其中我将拥有三列，高度为 220 像素，但宽度不同（77 像素、200 像素和 300 像素）。当您单击一个 div 时，它将打开为固定大小（每个 div 都相同，例如 400px），而其他未单击的 div 将缩小回原始大小（77px、200px 和 300px）。就像不同宽度的手风琴一样..

我的jquery已经到达那里，但还没有完全完成，我知道如何在点击时创建一个事件，我知道从那里我需要将所有东西缩小，除了我点击的那一个回到原来的大小。我完成了，但使单击的部分扩展至所需的大小。

jsfiddle 这里！

    $(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

好吧，我想我已经开始工作了。喜欢这个吗？

但是，这不会将单击的元素设置为固定大小，而是设置为剩余的大小。如果您将单击的元素调整为固定大小，则三列将变得更宽或更薄，然后 1000px，这真的是您想要的吗？

这里是一个更新的示例。这正是您所要求的，但我不确定这是否是您想要的。

带有内嵌注释的代码：

$(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);  
    });
});