У нас есть место для твоих статей =)
В предыдущей статье об обновлении блога я уже упоминала о библиотеке и основанном на ней плагине , с помощью которого реализованы вкладки на сайдбаре. Я бы хотела продолжить этот обзор открытием рубрики "Веб-разработка", где буду размещать статьи о различных языках программирования, и в частности об .
На сегодняшний день, использование AJAX становится все более акутальным. Это, в первую очередь, связано с огромными возможностями применения языка: от простых , до и самых разнообразных проектов, например .
Наиболее известные AJAX фреймворки это: , и . А последний из перечисленных уже завоевал сердца многих любителей поэкспериментировать, в том числе и мое 
Поэтому, я открываю рубрику с обзора интересного и красивого эффекта, основанного на этой библиотеке.
Я не стану углубляться в изучение основ JQuery, т.к. в сети можно найти бесконечное число справочников, блогов и всю необходимую информацию об этом фреймворке. Достаточно, например, заглянуть и тут же хочется все попробовать в действии
А эффект, о котором я хочу рассказать, называется InnerFade, что в переводе означает "внутреннее растворение". С этим эффектом знаком каждый: когда одна картинка медленно растворяется, превращаясь в другую. Чаще всего, мы привыкли видеть этот эффект реализованным на flash или как банер .gif. Flash, безусловно, по весу будет намного меньше чем .gif банер, но минус в том, что flash не индексируется поисковиками. И вот тогда, нас и выручит JQuery.
Решение будет очень простым. Все, что нам нужно - это наши изображения и небольшой код.
Для начала, не забываем добавить в тег <head> документа скрипт инициализации JQuery и соотвествующего плагина jquery.innerfade.js:
<script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.innerfade.js" mce_src="js/jquery.innerfade.js"></script>
Далее прописываем наши изображения, например, в виде структурированного списка:
<ul id="gallery"> <li><a href="http://www.getincss.ru" title="Изображение 1"><img src="images/beach1.jpg" width="200" height="200" alt="Изображение 1" /></a><li> <li><a href="http://www.getincss.ru" title="Изображение 2"><img src="images/beach2.jpg" width="200" height="200" alt="Изображение 2" /></a></li> <li><a href="http://www.getincss.ru" title="Изображение 3"><img src="images/beach3.jpg" width="200" height="200" alt="Изображение 3" /></a></li> </ul>
Скрипт вызова функции InnerFade подключаем либо также в <head>, либо в <body>:
$(document).ready(function() {
$('ul#gallery').innerfade({
speed: 1000, //скорость растворения изображения
timeout: 2000, //время показа одного изображения
type: 'sequence', //отображать по порядку
containerheight: '188px' // высота блока
});
});
И вот, что увидим в итоге:
При такой реализации мы можем прописать к каждому изображению ссылку и заголовок, что будет большим плюсом по сравнению с flash или .gif банерами.
Плагин InnerFade позволяет менять не только изображения, но и любые фрагменты текста и кода.
Enjoy :)
Статья взята с портала
http://www.getincss.ru/