0

私は 3 つの div を持っていますが、元々はすべて幅が 33.333% です。div をクリックすると、div が 80% に展開され、他の 2 つの選択されていない 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

アティフさん、お返事ありがとうございます。私の投稿からあなたの返信までの間に、このスレッドjquery animation on floating elements を見つけました。私が探していたものを正確に生成したこの例に従いました。

于 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 に答える