→JavaScript программирование → Симуляция задержки между fade in/out эффектами в JQuery
Jquery хорош тем, что позволяет пименять так называемые «цепочные решения».
Решение в лоб:
Показывает и скрывает элемент с id=«foo».
Если нужно красиво показать блок и так же красиво его скрыть, используем fade-in-fade-out эффект:
В течении 2 секунд (2000 мс) блок будет проявляться, потом в течении 2 секунд блок будет скрываться. Если нам необходимо установить задержку между fadeIn и fadeOut, тогда делаем так:
Установлена задержка в 5 секунд.
Для проявления полупрозрачности (50% — второй параметр) с задержкой в 3 секунды можно воспользоваться следующим кодом:
Рассмотрим пример задержки:
1. Проявить элемент в течении двух секунд (прозрачность от 0 до 1)
2. Задержать прозрачность на уровне 1 в течении 5 секунд
3. Прятать блок в течении 2 секунд (прозрачность с 1 до 0)
Решение:
Решение в лоб:
$("#foo").show().hide();
Показывает и скрывает элемент с id=«foo».
Fade-in-fade-out
Если нужно красиво показать блок и так же красиво его скрыть, используем fade-in-fade-out эффект:
$(document).ready(function() {
$("#foo").fadeIn(2000).fadeOut(2000);
});
$("#foo").fadeIn(2000).fadeOut(2000);
});
В течении 2 секунд (2000 мс) блок будет проявляться, потом в течении 2 секунд блок будет скрываться. Если нам необходимо установить задержку между fadeIn и fadeOut, тогда делаем так:
$(document).ready(function() {
$("#foo").fadeIn(2000).delay(5000).fadeOut(2000);
});
$("#foo").fadeIn(2000).delay(5000).fadeOut(2000);
});
Установлена задержка в 5 секунд.
Фокусы с задержкой без delay
Для проявления полупрозрачности (50% — второй параметр) с задержкой в 3 секунды можно воспользоваться следующим кодом:
$("#foo").fadeTo(3000, 0.5);
Рассмотрим пример задержки:
1. Проявить элемент в течении двух секунд (прозрачность от 0 до 1)
2. Задержать прозрачность на уровне 1 в течении 5 секунд
3. Прятать блок в течении 2 секунд (прозрачность с 1 до 0)
Решение:
$(document).ready(function() {
$("#foo").fadeIn(2000).fadeTo(5000, 1).fadeOut(2000);
});
$("#foo").fadeIn(2000).fadeTo(5000, 1).fadeOut(2000);
});
Задержка перед стартом
$(document).ready(function() {
$("#foo").fadeTo(3000, 0).fadeIn(2000)
.fadeTo(5000, 1).fadeOut(2000);
});
$("#foo").fadeTo(3000, 0).fadeIn(2000)
.fadeTo(5000, 1).fadeOut(2000);
});
