Последовательное появление элементов
Данный скрипт будет полезен, например, сайтам с большим количеством изображений, т.к. позволяет реализовать последовательное появление элементов на страничке. Таким образом, при загрузке странички, посетитель увидит последовательное проявление изображений.
Для примера, обновите страничку и обратите внимание на то, как появляются изображения, расположенные ниже.
В предлагаемом нами скрипте можно настраивать время между появлением элементов и скорость проявления данных элементов. Давайте рассмотрим скрипт последовательного появления изображений.
Для этого первым делом стоит добавить изображения на свой сайт и сделать их невидимыми. Для этого разместите данный стиль изображений межу тегами <head></head>:
<style type="text/css">
img.fade { display: none; }
</style>Изображения следует добавить класс fade следующим образом:
<img class="fade" src="image/img_1.png" alt="">
<img class="fade" src="image/img_2.png" alt="">
<img class="fade" src="image/img_3.png" alt="">
<img class="fade" src="image/img_4.png" alt="">Для того чтобы скрипт последовательного появления элементов заработал на Вашем сайте, Вам потребуется подключить библиотеку jQuery. Лучше это делать в конце странички:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>После того, как библиотека jQuery была подключена, добавьте следующий JavaScript код, в котором можно задать задержку между появляющимися элементами (в нашем случае изображениями) и скорость их появления:
<script type="text/javascript">
$(document).ready(function(){
$.fn.fade_img = function (ops) {
var $elem = this;
var res = $.extend({ delay: 600, speed: 600 }, ops);
for (var i=0, pause=0, l=$elem.length; i<l; i++, pause+=res.delay) {
$elem.eq(i).delay(pause).fadeIn(res.speed);
}
return $elem;
};
$('img.fade').fade_img();
});
</script>В нашем случае появление изображений начнется только после полной загрузки странички. Как видите, скрипт довольно небольшой, но в то же время может быть полезен для сайтов с большим количеством изображений или каких-нибудь других элементов, которые следует выводить на экран по очереди.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Замените в стиле и в JavaScript коде "img.fade" на "div.fade" или просто ".fade", а блокам div присвойте класс "fade": <div class="fade"><img src="image/img_1.png" alt=""></div>
А возможно добавить прелоадер в виде gif картинки?
Перед строчкой: return $elem;
Добавьте: $(".indicator").delay(pause-res.delay).fadeOut(600);
А как реализовать Последовательное исчезновение элементов?
на строчку: for (var i=$elem.length, pause=0; i>=0; i--, pause+=res.delay) {