Question

我有3个div，最初的宽度为33.333％。单击div时，我希望div扩展到80％，其他两个未选择的div将崩溃到10％。我也希望这个过程是动画的。当我尝试时，最右边的列被推下页面直到动画完成。我怎样才能让这个过程流利？

HTML：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>        
    <title>
    </title>
    </head>
    <body>
        <div class="column" id="column1">    
            1
        </div>
        <div class="column" id="column2">
            2
        </div>
        <div class="column" id="column3">
            3
        </div>
    </body>    
</html>

CSS：

body {
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px
}
.column {
    height:100%;
    float:left;
}
#column1{
    width:33.33333%;
    background:red;
}
#column2{
    width:33.33333%;
    background:white;
}
#column3{
    width:33.33333%;
    background:blue;
}

JS：

$(document).ready(function(){
  $("#column1").click(function(){
    $("#column1").animate({width:"80%"},{duration:1500,queue:false});
    $("#column2").animate({width:"10%"},{duration:1500,queue:false});
    $("#column3").animate({width:"10%"}, {duration:1500,queue:false});
  });
  $("#column2").click(function(){
    $("#column1").animate({width:"10%"},{duration:1500,queue:false});
    $("#column2").animate({width:"80%"},{duration:1500,queue:false});
    $("#column3").animate({width:"10%"}, {duration:1500,queue:false});
  });
  $("#column3").click(function(){
    $("#column1").animate({width:"10%"},{duration:1500,queue:false});
    $("#column2").animate({width:"10%"},{duration:1500,queue:false});
    $("#column3").animate({width:"80%"}, {duration:1500,queue:false});
  });
});

http://jsfiddle.net/KkxHS/

Answer 1

欢迎使用StackOverflow，试试这个

$(document).ready(function() {
    var selectedWidth = "80%";
    var othersWidth = "10%"
    $(".column").click(function() {
        var self = $(this);
        $(this).siblings().animate({
            width: "10%"
        }, 1500, function() {
            self.animate({
                width: "80%"
            }, {
                duration: 1500,
                queue: false
            });

        });
    });
});

小提琴 - http://jsfiddle.net/atif089/KkxHS/3/

或

$(document).ready(function() {
    $(".column").click(function() {
        var self = this;
        $(this).siblings().animate({
            width: "10%"
        }, {
            duration: 1500,
            queue: false
        });
        setTimeout(function() {
            console.log(self);
            $(self).animate({
                width: "80%"
            }, {
                duration: 1500,
                queue: false
            });
        }, 500);

    });
});

小提琴 - http://jsfiddle.net/atif089/KkxHS/4/

Answer 2

Atif，非常感谢您的回复。在我发布和回复之间的时间内，我找到了这个帖子jquery animation on floating elements。我已经按照这个例子生成了我正在寻找的内容。

在动画期间，列被推下页面

2 个答案: