Jquery-анимация с вложенным циклом эффектов
У меня есть вложенная функция для отображения / скрытия абзацев в стиле тикера.
Проблема в том, что когда цикл начинается заново (строка 4), эффекты непрозрачности перестают работать правильно, поэтому абзацы появляются внезапно.
Любые мастера jquery знают об этом? Я слишком усложняю?
$('#special-ticker p').hide();
var a=0;
function outer() {
function inner() {
if (a===$('#special-ticker p').length) { a = 0; }
$('#special-ticker p').
eq(a).
fadeIn(800, function(){
$(this).animate({opacity:100},10000,null,function(){
$(this).hide(800,function(){
a++;
outer();
});
});
});
}
return inner();
}
$(function(){
outer();
});
Он используется для задержки следующего действия на 10 секунд вместо использования setTimeout или setInterval.
Ответы 4
проблема в строке 9:
$(this).animate({opacity:100},10000,null,function(){
//...
непрозрачность должна быть «1» (непрозрачность - значение от 0 до 1)
$(this).animate({ opacity : 1 }, 10000, null, function() {
Метод animate не имеет ничего общего с непрозрачностью. Он используется только как задержка для управления продолжительностью отображения текста перед скрытием.
проблема не в анимации, он устанавливает непрозрачность на 100, что не является допустимым результатом, непрозрачность - это значение от 0 до 1. скопируйте и протестируйте его код как есть, затем измените непрозрачность на 1, как в моем примере, вы ' Вы увидите, что упомянутая им резкая остановка анимации исчезнет.
Попробуй это:
newsticker = function (selector) {
$(selector).hide();
var i = $(selector).length - 1;
var toggle = function() {
$(selector).eq(i).fadeOut("slow", function() {
i = ++i % $(selector).length;
$(selector).eq(i).fadeIn("slow", function() {
setTimeout(toggle, 1000)
});
});
};
toggle();
};
и инициализируйте его следующим образом:
new newsticker("#special-ticker p");
хорошее решение. К OP: если вы действительно хотите сохранить эффект вытеснения, просто измените первый «fadeOut» на «hide».
Решение опубликовано, но есть один комментарий:
Если группа элементов будет немедленно скрыта, быстрее создать «скрытый» класс CSS, а затем назначить его этим элементам. Сохраняет немного кода javascript, но также гарантирует, что скрытые элементы не будут на короткое время мигать на экране.
<style type = "text/css" media = "screen">
.hidden { display: none; }
</style>
<p>Show me</p>
<p class = "big hidden">Use javascript to show me later.</p>
Хорошая точка зрения. Если вы используете эту технику, вам следует подумать об использовании javascript для создания CSS (для постепенной деградации).
Небольшая переработка кода для сохранения многократного создания экземпляров jQuery с одними и теми же селекторами. Я тоже думаю, что это немного легче читать.
var jS = $('#special-ticker p');
// jS.hide(); // not needed if css hides elements initially
var i = 0;
function do_ticker() {
jS.eq(i).fadeIn(800, function() {
var me = $(this);
setTimeout(function() { me.hide(800,
function() {
i = ++i % jS.length;
do_ticker();
});
},1000); // setTimeout
});
};
do_ticker();
Почему за fadeIn следует .animate ({opacity: 100})? они достигают почти такого же эффекта