0

我有 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/

4

2 回答 2

0

Atif，非常感谢您的回复。在我发帖和您的回复之间的时间里，我找到了这个线程，浮动元素上的 jquery 动画。我遵循了这个例子，它产生了我正在寻找的东西。

于 2012-12-24T16:06:50.410 回答
0

欢迎来到 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/

于 2012-12-24T03:46:29.083 回答