Интересный эффект растворения элементов при помощи jQuery. Использовать его можно в качестве ротатора баннеров, фраз, ссылок и т.п. Все зависит от Вашей фантазии и функциональных потребностей Вашего сайта. Итак, приступим.
Шаг 1.
Для начала нужно скачать и подключить к документу необходимые скрипты.
Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
Шаг 2.
Затем между тегами необходимо написать следующий код:Code
<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.
В нужном нам месте вставим код блока с растворяющимися элементами:
Для картинок это будет следующий код:
Code
<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>
Чтобы избавиться от точек элементов списка, между тегами или в отдельном css файле пропишем стиль:Code
li {
list-style-type: none;
}
Для элементов в абзацах код будет следующий:Code
<div class="fade">
1
</p>
2
</p>
3
</p>
4
</p>
5
</p>
</div>
Область использования такого скрипта очень широкая!
Источник: www.medienfreunde.com