+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Плавное появление блока (элемента) после загрузки страницы jQuery

Рассмотрим простой пример плавного появления элемента на странице, после загрузки сайта.
Создаем наш бок
<div class="blue200x80" id="block1">Наш блок</div>
Оформляем
.blue200x80{
display:none;
width:500px; height:70px;
background: Blue;
color:#fff;
font:18px Arial,sans-serif;
padding:24px 0 0 16px;}
Подключаем библиотеку jQuery и пишем простой код
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript">
$(window).ready(function(){
/* делаем плавное появление */
$("#block1").fadeIn('slow');
});
</script>
Рассмотри другой вариант. Сделаем так, чтобы элемент появлялся не сразу после загрузки, а через некоторое время, например через 2 секунды
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript">
$(window).ready(function(){
/* немного другой эффект появления, и задержка в 2 секунды */
setTimeout ("$('#block1').show('drop');",2000);
});
</script>

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 10761