[Бесконечная карусель текста] В чем ошибка?
Доброго времени суток Уважаемые.
Сделал на jQuery карусель текста, но в решении казалось бы столь тривиальной задачи происходит следующее: при переходе от функции marqueeRemove до исполнения marqueeLoop - не работает заданная анимация. $(document).ready(function(){ var scrollTextBox = $('#marquee'); //головной div, в который помещен span с текстом function marqueePlay() { //функция проходит один раз выполняя 1,2 -пункты указанной ниже схемы var scrollFirst = scrollTextBox.children().height() - scrollTextBox.height(); scrollTextBox.animate({ //анимация скролла scrollTop: scrollFirst}, { duration:6000, complete:function() { marqueeLoop(); //переход к основной функции } }); } function marqueeLoop() { //в сочитание с marqueeRemove выполняет 3-5 пункты схемы-алгоритма, зацикливается scrollTextBox.children('span').clone().appendTo(scrollTextBox); var scrollLoop = 2 * scrollTextBox.children(':first').height() - scrollTextBox.height(); scrollTextBox.animate({ //Вот ТУТ на втором проходе что-то идет не так(анимация перестает работать)! scrollTop: scrollLoop}, 6000, marqueeRemove); } function marqueeRemove() { scrollTextBox.children(':first').remove(); marqueeLoop(); } marqueePlay(); }); Для наглядности сделал "схему алгоритма" сей карусели, дабы Вы скорее поняли что код вроде и правильный, но либо "я.. либо лыжи не едут" |
1) Я бы на твоем месте дебажил все изменения которые происходят в это блоке
function marqueeLoop() { //в сочитание с marqueeRemove выполняет 3-5 пункты схемы-алгоритма, зацикливается scrollTextBox.children('span').clone().appendTo(scrollTextBox); var scrollLoop = 2 * scrollTextBox.children(':first').height() - scrollTextBox.height(); scrollTextBox.animate({ //Вот ТУТ на втором проходе что-то идет не так(анимация перестает работать)! scrollTop: scrollLoop}, 6000, marqueeRemove); } 2) может лажает clone советую вместо него пока забить тупо так $("<span>my span</span>").appendTo(scrollTextBox); |
спасибо за ответ. Сею задачу решил довольно просто:)
Вы совершенно правы - проблема была в clone, в нем нужно было указать true для разрешения копирования обработчиков событий. Только данное решение мне не подошло, т.к. скрипту нужно время на копирование-вставку и она довольно заметна + анимация не плавно работает.Пока в флеше сделал - позже буду лопатить по-другому на том же jQuery. |
ну вот, переписал скрипт:
$(document).ready(function() { var scrollTextBox = $('#secondary'); //головной div, в который помещен aside с текстом внутри var thisHeight = scrollTextBox.children().height() + 'px'; function marqueePlay() { scrollTextBox.children().clone(true).appendTo(scrollTextBox); scrollTextBox.children(':first').each(function() { $(this).animate({ marginTop: '-' + thisHeight}, 20000, 'linear', function() { scrollTextBox.children(':first').remove(); marqueePlay(); //переход к основной функции } ); }); } marqueePlay(); }); скрипт работает отлично, но с той возможностью плавности которую предоставляет нам jQuery... (на Flash, CSS3 - значительно плавнее) |
Часовой пояс GMT +3, время: 09:38. |