jQuery DIV高度問題

美好的一天:)jQuery DIV高度問題

我在不透明度和高度上使用jQuery的animate（），在固定大小的div上。
這一切都工作正常，在Firefox中，但在IE8（有和沒有兼容模式，所以我認爲它將在IE6和IE7中具有相同的行爲），動畫確實顯示，但當div高度達到0 ％，div的高度將調整爲該div內部文本的高度。
我立即做的第一件事是將溢出設置爲隱藏，但它仍然給出相同的行爲。

我使用下面的函數來慢慢切換高度/不透明度：

function OpacityFadeToggle(e_trigger, e_element, speed) 
{ 
    $(e_trigger).toggle(
     function() { 
      $(e_element).animate({ 
       opacity: 0.0, 
       height:  "0px" 
      }, speed); 
     }, 
     function() { 
      $(e_element).animate({ 
       opacity: 1.0, 
       height:  "500px" 
      }, speed); 
     } 
    ); 
} 

$(function() { 
    OpacityFadeToggle("a#a2", "div#b1", 1000); 
});

風格對我的「B1」的div如下：

div#b1 { 
    color:  #ffffff; 
    background-color: #000000; 
    overflow:  hidden; 
    width:  600px; 
    height:  500px; 
    padding:  0px; 
    margin:  0px; 
    display:  block; 
}

如果你寧願要看到一個生動的例子，我已經暫時在這裏設置了一個頁面：click me!

任何關於此事的幫助都非常感謝。

來源

2009-04-18 Daniel Sloof

將動畫設置爲1px，然後在動畫完成後隱藏div，怎麼辦？此外，請確保在從1px到500px的動畫效果之前再次顯示div。

function OpacityFadeToggle(e_trigger, e_element, speed) 
{ 
    $(e_trigger).toggle(
     function() { 
       $(e_element).animate({ 
         opacity:  0.0, 
         height:   "1px" 
       }, speed).hide(); 
     }, 
     function() { 
       $(e_element).show().animate({ 
         opacity:  1.0, 
         height:   "500px" 
       }, speed); 
     } 
    ); 
}

來源

2009-04-18 15:43:45 Matt

仍然是一個小小的閃爍，但不是太糟糕。 – 2009-04-18 15:52:04

確實仍然是一個微小的閃爍，但這應該做的。謝謝：） – 2009-04-18 16:10:48

您可以嘗試向jQuery的動畫調用添加回調，並在回調中通過更改其顯示屬性來隱藏div。

來源

2009-04-18 15:43:07 pgb

這會導致文本'Hi！'閃爍到它通常會休息的位置，然後回到鏈接旁邊。 – 2009-04-18 15:50:03

jQuery DIV高度問題

回答

相關問題