jQuery：div在動畫後彈回全尺寸

在下面的jQuery示例中，我有一個div在另一個div內。當我將內部div的動畫設置爲0的寬度時，外部div（具有絕對定位）隨着寬度減小。jQuery：div在動畫後彈回全尺寸

這是所希望的。

問題在於動畫完成後，外部div會彈回原始大小。這是預期的嗎？我怎樣才能防止這種情況發生？

謝謝！

例

HTML：

<div class="outer"><div class="inner">innerContent</div></div>

CSS：

div.outer { 
    position: absolute; 
    padding: 10px; 
    background: purple; 
} 

div.inner { 
    position: relative; 
    padding-left: 5px; 
    padding-right: 5px; 
    background: orange; 
    clip: auto; overflow: hidden; 
}

的javascript：

$('.outer').click(function() { 
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow'); 
});

來源

2009-05-28 user113716

適用於Firefox和IE。 – kgiannakakis 2009-05-28 13:08:41

看起來像是如果我抓住'outer'div的寬度和'inner'div的outerWidth，然後從'inner'div的outerWidth減去'outer'div的寬度，併爲'outer'寬度與結果同時動畫的'內'爲0，它的作品。

對這是否應該是針對jquery或webkit的錯誤修復請求有任何意見或兩者都有。

$('.outer').click(function() { 
    var innerWidth = $('.inner').outerWidth(); 
    var outerWidth = $('.outer').width(); 
    var theWidth = outerWidth - innerWidth; 
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow'); 
    $('.outer').animate({width: theWidth}, 'slow'); 
});

來源

2009-05-28 13:46:21 user113716

我會報告它作爲一個jQuery的錯誤。 jQuery的重點是在瀏覽器之間規範化這些東西。 – Nosredna 2009-05-28 13:49:27

順便說一句，在這個例子中，我可以只將外部動畫設置爲0，但在我的實際頁面中，內部div旁邊的其他內容必須保持可見，所以將外部減少爲0實際上並不是一種選擇。 – user113716 2009-05-28 13:50:01

諾斯瑞德娜，好點。只是預感到它可能會導致更快的修復。 – user113716 2009-05-28 13:51:19

您是否嘗試過的外箱寬度設置爲0動畫完成後？

$('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() { 
    $('.outer').css("width", 0); 
});

來源

2009-05-28 13:15:32 peirix

嗯，這種作品。它實際上創建了一個口吃，其中外部div仍然擴展到全尺寸一秒，然後它減少到0. – user113716 2009-05-28 13:25:39

對於我在Firefox 3.0.10中使用jQuery 1.3.2在Ubuntu 9.04中，這完美的工作。可能是某種與頁面中其他html元素的交互？

來源

2009-05-28 13:18:44 Keeper

我正在使用基於webkit的瀏覽器。剛剛在Mac OS X上試用過Firefox，它完美地工作，所以它一定是一個webkit的問題。我發佈的例子是我的頁面的一個非常簡化的版本。無論是否存在其他元素，行爲都是相同的。 – user113716 2009-05-28 13:30:19

在我的測試中，這在IE，FF和Opera中可以正常工作，但會產生您在Chrome和Safari中提到的錯誤。

來源

2009-05-28 13:23:09 ichiban

是的，看起來像webkit是罪魁禍首。希望我能找到一個合適的解決方法。 – user113716 2009-05-28 13:32:16

jQuery：div在動畫後彈回全尺寸

回答

相關問題