Проблемы с высотой jQuery DIV
-
11-09-2019 - |
Вопрос
Хорошего дня :)
Я использую animate() от jQuery как для непрозрачности, так и для высоты, для 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);
});
Стиль для моего div "b1" следующий:
div#b1 {
color: #ffffff;
background-color: #000000;
overflow: hidden;
width: 600px;
height: 500px;
padding: 0px;
margin: 0px;
display: block;
}
Если вы предпочитаете посмотреть живой пример, я временно создал страницу здесь: кликни меня!
Любая помощь в этом вопросе очень ценится.
Решение
Как насчет того, чтобы анимировать его до 1 пикселя, а затем скрыть div после завершения анимации?Кроме того, обязательно снова покажите div перед анимацией от 1px до 500px.
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);
}
);
}
Другие советы
Вы можете попробовать добавить обратный вызов к вызову animate jQuery и внутри обратного вызова скрыть div, изменив его свойство display .