Почему эта анимация слайдов JQuery имеет проблему высоты с DIV? - PullRequest
Новая
       14

Почему эта анимация слайдов JQuery имеет проблему высоты с DIV?

0 голосов
/ 03 марта 2010

Я добавил на страницу эффект показа слайдов JQuery, который частично отображает div основного содержимого (с текстом, flash и / или изображениями) в течение нескольких секунд, а затем анимирует его, чтобы раскрыть полный div содержимого. Скриптовая анимация добавляется в div класса «.slide» на странице, который может иметь различную высоту, в зависимости от того, сколько текста или других элементов размещено. Я протестировал его в IE6 и FF 3, и он работает «несколько» хорошо.

Однако тестирование анимации в IE7 не позволяет полностью раскрыть div и по-прежнему очень плохо покрывает большую часть контента. Также иногда в других браузерах происходит некорректное скрытие или обрезка, поэтому анимация показа слайдов не открывается полностью.

Я полагаю, что браузеры неправильно рассчитывают полную высоту div со всем содержимым, включая интервалы, отступы и высоту строки.

Есть ли способ заставить эту работу работать правильно, чтобы скрипт получил точную высоту div, а затем анимация переместилась в правильную позицию?

Соответствующая слайд-страница .

Соответствующий код JQuery: 

// Set the initial open height for sliding div:
var sliderHeight = "485px";

var initialDelay = 2000;
var slideDuration = 2000;

$(document).ready(function(){

 // Show the slider content
 $('.slider').show();

 $('.slider').each(function () {
  var current = $(this);
  current.attr("box_h", current.height());
 });

 $(".slider").css("height", sliderHeight);

var delay = function() { sliderOpen(); };

setTimeout(delay, initialDelay);

});


function sliderOpen()
{
 var open_height = $(".slider").attr("box_h") + "px";
 $(".slider").animate({"height": open_height}, {duration: slideDuration });
}

1 Ответ

0 голосов
/ 03 марта 2010

Вот более элегантное решение с четырьмя вкладышами, которое не зависит от абсолютной высоты в пикселях: 

$(function() {
    var initialDelay = 2000;
    var slideDuration = 2000;
    $(".slider").show().children().not(".showAtFirst").hide();  //show the parent container but hide all children.  
    window.setTimeout(function() { $(".slider").children(":hidden").slideDown(slideDuration) }, initialDelay);
});

все, что вам нужно сделать, это убедиться, что элементы, видимые в начале, имеют класс showAtFirst.

...