Эффект растворения элементов на jQuery

В этом уроке мы рассмотрим интересный эффект растворения элементов при помощи jQuery. Использовать его можно в качестве ротатора баннеров, фраз, ссылок и т.п. Все зависит от Вашей фантазии и функциональных потребностей Вашего сайта.

demosourse

Итак, приступим к созданию такого эффекта.

Шаг 1.

Для начала нужно скачать и подключить к документу необходимые скрипты.

 <script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.innerfade.js"></script>

Шаг 2.

Затем между тегами <head> необходимо написать следующий код:

 <script type="text/javascript">

$(document).ready(

function(){

$('ul#portfolio').innerfade({

speed: 1000,

timeout: 5000,

type: 'sequence',

containerheight: '220px'

});



$('#news').innerfade({

speed: 1000,

timeout: 5000,

type: 'sequence',

containerheight: '10px'

});





$('.fade').innerfade({

speed: 1000,

timeout: 6000,

type: 'random',

containerheight: '1.5em'

});

});

</script>

В данном случае свойства кода прописаны для всех трех элементов, использующихся в примере. Ненужные можете удалить.

Параметр type указывает на порядок появления элементов: sequence (последовательно) или random (появление в случайном порядке).

Параметр containerheight указывает высоту растворяющегося блока.

Шаг 3.

В нужном нам месте вставим код блока с растворяющимися элементами:

Для картинок это будет следующий код:

 <ul id="portfolio"> 

<li>

<a href="http://ruseller.com/"><img src="images/ggbg.gif" alt="" /></a>

</li>

<li>

<a href="http://ruseller.com/"><img src="images/whizzkids.gif" alt="" /></a>

</li> 

<li>

<a href="http://ruseller.com/"><img src="images/km.jpg" alt="" /></a>

</li> 

</ul>

При необходимости список может быть продолжен или сокращен.

Для ссылок код будет такой:

 <ul id="news"> 

<li>

<a href="#n1">1 Первый текст с ссылкой</a>

</li>

<li>

<a href="#n2">2 Второй текст с ссылкой</a>

</li> 

<li>

<a href="#n3">3 Третий текст с ссылкой</a>

</li> 

<li>

<a href="#n4">4 Четвертый текст с ссылкой</a>

</li>

</ul>

Чтобы избавиться от точек элементов списка, между тегами <head> или в отдельном css файле пропишем стиль:

 li {

list-style-type: none;

}

Для элементов в абзацах код будет следующий:

<div class="fade"> 

<p>

1

</p>

<p>

2

</p>

<p>

3

</p>

<p>

4

</p>

<p>

5

</p>

</div>

Ну вот и все! Область использования такого скрипта очень широкая! Надеюсь он получит свое отражение и на Ваших сайтах.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.medienfreunde.com
Перевел: Сергей Патин
Урок создан: 28 Апреля 2009
Просмотров: 42501
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^