1. 首頁
  2. 問答
  3. 列動畫期間推下頁面

列動畫期間推下頁面

2012-12-24 37 views
0

我有3個divs，所有原本寬度爲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/

來源

2012-12-24 HeyPassMeABeer

回答

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-24 03:46:29

相關問題

 相關問題