+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>
Демонстрация
Остались вопросы? Спрашивайте!
Понравилась статья? Расскажи другим :)
Опубликовано: | Просмотров: 19988