2009-04-18 2 views
0

хорошего дня :)JQuery DIV высота вопросы

Я использую JQuery одушевленного (в) как на непрозрачности и высоту, на фиксированный размере делах.
Все работает отлично и dandy в 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!

Любая помощь по этому вопросу очень ценится.

ответ

4

Что можно сделать с анимацией до 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); 
     } 
    ); 
} 
+0

Все еще маленькое мерцание, но не так уж плохо. –

+0

Действительно, все еще крошечное мерцание, но это должно сделать. Благодаря :) –

1

Вы можете попробовать добавить обратный вызов в анимированный вызов jQuery, а внутри обратного вызова скрыть div, изменив его свойство отображения.

+0

В результате получается текст «Привет!». мерцая вниз до того места, где он обычно отдыхает, а затем возвращается обратно к ссылке. –

Смежные вопросы