jquery動畫幫助

是否可以同時動畫兩個div寬度（一個遞增，一個遞減），以便父容器的總寬度保持完全相同。jquery動畫幫助

作爲一個例子，容器div包含5個子div。 Teh容器div寬1000px，其中4個子div寬150px，另一個400px。我希望能夠將400px div的動畫製作爲150px，並將150px的其中一個製作爲400px;

我得到的問題是，父容器收縮和擴大動畫完成 - 它發生明顯。

我不是在尋找一個插件或任何這個，只是一些建議，在實現這一目標的最佳方式。

非常感謝您的任何幫助。

編輯：

的主要問題是，在一個右每一格進行動畫被拉到左邊，然後送回出來的時候完成。

這裏是我使用

<style type='text/css'> 
    .panel-wrapper { 
     width: 954px; 
     height: 372px; 
     background-color: #fff; 
     position: relative; 
     overflow: hidden; 
    } 
    .panel-wrapper .panel { 
     margin-right: 1px; 
     height: 100%; 
     width: 64px; 
     float: left; 
     background-color: #cacaca; 
    } 
    #home-panel { 
     width: 359px; 
    } 
    .panel.last { 
     margin-right: 0; 
    } 
</style> 

<script type='text/javascript'> 
//<![CDATA[ 
jQuery(document).ready(function() { 
    jQuery('.panel').mouseenter(function() { 
     jQuery('.panel-wrapper .open').stop().animate({width:"64px"},400, 'linear'); 
     jQuery('.panel-wrapper .open').removeClass('open'); 
     jQuery(this).addClass('open'); 
     jQuery(this).stop().animate({width:"359px"},400, 'linear'); 
    }); 
}); 
//]]> 
</script> 

<div class='panel-wrapper'> 
    <div id='home-panel' class='panel open'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel last'> 
    </div> 
</div>

來源

2011-03-12 David

您是否嘗試過將動畫類型設置爲線性？ – DXL 2011-03-12 17:39:15

我已經嘗試設置寬鬆線性已經但這沒有任何區別 – David 2011-03-12 17:43:48

設置父高度爲固定的像素數將保持它的收縮或擴張的代碼。

來源

2011-03-12 17:39:39

嗨，它的水平和divs浮動左。所有東西都有固定的像素寬度。 – David 2011-03-12 17:41:22

如果父div正在調整大小，那麼它不得具有已設置的固定寬度。 – 2011-03-12 17:50:38

@Chris W.它確實有一個固定的寬度，每個孩子divs – David 2011-03-12 18:01:19

在你想要對抗的div後面加上一個1000px寬的空div。這應該保持包裝div不收縮。

來源

2011-03-12 17:51:56

嗨，吉姆，謝謝，但這沒有奏效 - 你背後的推理是什麼？ – David 2011-03-12 17:59:54

jquery動畫幫助

回答

相關問題