jquery浮動動畫問題

我想做一個動畫。演示：http://jsfiddle.net/pVTR7/9/jquery浮動動畫問題

$('a.hide').click(function(){ 
    $('.left').animate({'width':'0%'}, 1000);  
    $('.right').animate({'width':'100%'}, 1000); 
}); 

$('a.reset').click(function(){ 
    $('.left').animate({'width':'50%'}, 1000);  
    $('.right').animate({'width':'50%'}, 1000); 
});

說明：2個不同的區域，在50％的寬度不同的內容。點擊'點擊'時，左側的區域將隱藏，右側的區域將全部顯示。當點擊'重置'時，左側區域將被滑入，兩個區域的寬度將爲50％。（看演示）

問題：隱藏左側區域時，右側區域在動畫過程中跳下去！開復位一切工作正常，沒有任何兩個區域之間的空間（像它應該是）

根據瀏覽器有一些不同的處理。 Safari - >右側區域跳下去。 Firefox - >區域之間的空間

我可以使用絕對位置，但然後我需要經常檢查內容的高度，並將此高度添加到容器。

來源

2012-10-25 Benmay

所以你想要相同的動畫效果如何發生重置權？ – Raghurocks

您需要更改方法。花車很難控制 –

我設法控制花車並做這個人想要的東西。 –

您可以使用此

$('a.hide').click(function(){ 
    var the_width = $(this).parent().width(); 
    $('.left').animate({'width':the_width-the_width}, 1000);  
    $('.right').animate({'width':the_width}, 1000); 
}); 

$('a.reset').click(function(){ 
    var the_width = $(this).parent().width()/2; 
    $('.left').animate({'width':the_width }, 1000);  
    $('.right').animate({'width': the_width}, 1000); 
});

http://jsfiddle.net/raghurocks/pVTR7/18/

你不應該給直接值當您使用浮動最好是使用變量希望這有助於d給：

來源

2012-10-25 11:28:43 Raghurocks

交易方式如下：

http://jsfiddle.net/pVTR7/19/

我需要改變的寬度，以減少到0，而不是0％

$('a.hide').click(function(){ 
    $('.left').animate({'width':'0'}, 1000);  
    $('.right').animate({'width':'100%'}, 1000); 
});

.right不得不被設定爲浮動：左;

.right { 
    width: 50%; 
    height: 50%; 
    float: left; 
    background: #ccc; 
}

希望這有助於！

來源

2012-10-25 11:33:15

jquery浮動動畫問題

回答

相關問題