Главная » 2013 » Сентябрь » 30 » Эффект плавного появления элементов (Скрипты для ucoz)
30.09.2013, 14:00

Эффект плавного появления элементов



Скрипт делает появление элементов и объектов плавным и постепенным, выводя их из изначального состояния (display: none;). Самое простое решение для осуществления последовательного отображения изначально скрытых картинок и блоков. Интервал появления регулируется по усмотрению в применении сменой значений в 2 местах. Понадобится установленная библиотека jQuery, версии вшитые в исходник сайта uCoz подойдут любые. Для достижения подобных целей свойствами CSS3 придётся делать внушительный код стилями, а так всё намного упрощается. Эффект проявления может быть применён ко всем тегам помещённым в зону которая будет изначально скрыта.

Но вот Вам скрипты с примерами, для различных применений:

Пример с картинками:

Код
<style>
#sequentially img{display:none;}
</style>
<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js">
</script>
<script>
$(document).ready(function(){
$(function() {
$('#sequentially img').each(function(n) {
$(this).delay((n++)*600).fadeTo(2000, 1); })
})
});
</script>
<div id="sequentially">
<img src="http://delaisait.ucoz.ru/img/delaisait.jpg" alt="Демо" />
<img src="http://delaisait.ucoz.ru/img/delaisait.jpg" alt="Демо" />
<img src="http://delaisait.ucoz.ru/img/delaisait.jpg" alt="Демо" />
<img src="http://delaisait.ucoz.ru/img/delaisait.jpg" alt="Демо" />
</div>


Пример с блоками

Код
<style>
#sequentially span{display:none;}
</style>
<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#sequentially span').each(function(n) {
$(this).delay((n++)*1000).fadeTo(2500, 1); })
})
});
</script>
<div id="sequentially">
<span>
<div style="width:100px;height:100px;background:red;"></div>
</span>
<span>
<div style="width:100px;height:100px;background:green;"></div>
</span>
<span>
<div style="width:100px;height:100px;background:blue;"></div>
</span>
<span>
<div style="width:100px;height:100px;background:black;"></div>
</span>
</div>


Пример с таблицей

Код
<style>
#sequentially td{display:none;}
</style>
<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#sequentially td').each(function(n) {
$(this).delay((n++)*1500).fadeTo(2500, 1); })
})
});
</script>
<table border="0" id="sequentially">
<tr>
<td style="width:100px;height:100px;background:blue;">
<td style="width:100px;height:100px;background:orange;">
<td style="width:100px;height:100px;background:black;">
<td style="width:100px;height:100px;background:indigo;">
</tr>
</table>


Пример с несколькими блоками

Код
<style>
#sequentially span{display:none;}
#sequentially img{display:none;}
#sequentially td{display:none;}
</style>
<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#sequentially span').each(function(n) {
$(this).delay((n++)*1000).fadeTo(1000, 1); })
})
$(function() {
$('#sequentially img').each(function(n) {
$(this).delay((n++)*1500).fadeTo(2000, 1); })
})
$(function() {
$('#sequentially td').each(function(n) {
$(this).delay((n++)*2000).fadeTo(3000, 1); })
})
});
</script>
<div id="sequentially">
<span>
<div style="width:100px;height:100px;background:red;"></div>
</span>
<span>
<div style="width:100px;height:100px;background:green;"></div>
</span>
<span>
<div style="width:100px;height:100px;background:blue;"></div>
</span>
<span>
<div style="width:100px;height:100px;background:black;"></div>
</span>
</div>
<div id="sequentially">
<img src="http://delaisait.ucoz.ru/img/delaisait.jpg" alt="Демо" />
<img src="http://delaisait.ucoz.ru/img/delaisait.jpg" alt="Демо" />
<img src="http://delaisait.ucoz.ru/img/delaisait.jpg" alt="Демо" />
<img src="http://delaisait.ucoz.ru/img/delaisait.jpg" alt="Демо" />
</div>
<table border="0" id="sequentially">
<tr>
<td style="width:100px;height:100px;background:blue;">
<td style="width:100px;height:100px;background:orange;">
<td style="width:100px;height:100px;background:black;">
<td style="width:100px;height:100px;background:indigo;">
</tr>
</table>


За примеры ожидаю + в репу:)
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: IZOTOP
Категория: Скрипты uCoz | Просмотров: 1135 | Добавил: hoster-saitov | Рейтинг: 0.0/0 |
Теги: плавно, effect, ПОЯВЛЯЛСЯ, медленно
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]