Для меня jQuery ассоциируется с мощной и главное кросс-браузерной JavaScript библиотекой. Можно долго перечислять ее достоинства, холиварить по поводу и без, но думаю, никто не будет против посмотреть подборку интересных плагинов и уроков:
для удобства – каждая картинка ведет на демо
![](https://habrastorage.org/r/w780q1/storage/habraeffect/2b/33/2b337e33ab7652ed18bf4cfc224d0cdc.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/e0/a4/e0a4bae3eafe21b2aecbfc539641d957.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/96/e4/96e4a58ae38ed4032e0dd0a16c4f2db0.jpg)
Демо + Описание
![](https://habrastorage.org/r/w780q1/storage/habraeffect/17/49/1749fa34c2273d51a8d12e314a786593.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/56/e6/56e68dedb1af8f08471fb5de55a7133f.jpg)
Демо + Описание
![](https://habrastorage.org/r/w780q1/storage/habraeffect/45/7d/457d9854d540559853409e2d632c6ab0.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/a9/bd/a9bdbe2fd7dcc87ceb3c3e0adc25950c.jpg)
Демо + Описание
![](https://habrastorage.org/r/w780q1/storage/habraeffect/b4/32/b43294ab7a807b63c7fcab5fe3a8a75f.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/7f/30/7f30088d36629cfc1a1188d3238cefb3.jpg)
Демо | Описание
![](https://habrastorage.org/r/w780q1/storage/habraeffect/05/86/058606938c4e39368009c30f6319d4d7.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/11/d7/11d70f59dab1ece3815eb03d6c7a347f.jpg)
Демо + Описание
![](https://habrastorage.org/r/w780q1/storage/habraeffect/3a/4a/3a4a5cf95b598ef78789953ce127966e.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/19/67/1967565ba8b660e3c3c1257d34982c55.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/25/37/2537438f6ff8cf86fe0d14311e5112e9.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/94/63/9463b71c8f42bd9396560d87d699bd91.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/b0/23/b023a0ab43f4ec2833bba52a8775ba7d.jpg)
Демо + Описание
![](https://habrastorage.org/r/w780q1/storage/habraeffect/b9/bd/b9bde2ed13ccdee2124edea817db2bf1.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/d1/83/d18385044ff7f06f35c41490b2b9e2ac.jpg)
Демо + Описание
![](https://habrastorage.org/r/w780q1/storage/habraeffect/98/38/9838d2f8f874061a77028fbbd5e76836.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/83/93/8393691280b03384517860cad9f2eea2.jpg)
Демо | Урок
![](https://habrastorage.org/r/w780q1/storage/habraeffect/da/64/da64fd715112bb7da1117ebc40984b0c.jpg)
Демо | Урок
Всем спасибо за внимание!
для удобства – каждая картинка ведет на демо
Hover Slide Effect
![](https://habrastorage.org/storage/habraeffect/2b/33/2b337e33ab7652ed18bf4cfc224d0cdc.jpg)
Демо | Урок
Галерея состоит из нескольких картинок, при наведении на одну из них она эффектно меняется на другую, а при клике на любую картинку — меняются все одновременно.
Animated Portfolio Gallery
![](https://habrastorage.org/storage/habraeffect/e0/a4/e0a4bae3eafe21b2aecbfc539641d957.jpg)
Демо | Урок
Красочное портфолио с возможностью скролить превью работ.
Soxer
![](https://habrastorage.org/storage/habraeffect/96/e4/96e4a58ae38ed4032e0dd0a16c4f2db0.jpg)
Демо + Описание
Простенький плагин для плавной смены изображений.
Pull Out Content Panel
![](https://habrastorage.org/storage/habraeffect/17/49/1749fa34c2273d51a8d12e314a786593.jpg)
Демо | Урок
Панель, которая выдвигается в заданном положении полосы прокрутки. Например, если вы хотите показать дополнительное окно с информацией, когда пользователь прокрутит до конца страницы. Эта панель будет адаптирована в зависимости от того, сколько элементов умещается на экране.
Fancy OpenID Selector
![](https://habrastorage.org/storage/habraeffect/56/e6/56e68dedb1af8f08471fb5de55a7133f.jpg)
Демо + Описание
Позволит быстро выбрать нужный OpenID и автоматически сгенерирует ссылку на основе пользовательских данных
Custom Animation Banner
![](https://habrastorage.org/storage/habraeffect/45/7d/457d9854d540559853409e2d632c6ab0.jpg)
Демо | Урок
Урок в котором показано как с помощью jQuery можно создать баннер с всевозможными эффектами.
jQuery Static Gmap Zoom
![](https://habrastorage.org/storage/habraeffect/a9/bd/a9bdbe2fd7dcc87ceb3c3e0adc25950c.jpg)
Демо + Описание
Простой плагин статических карт. При наведении мышью происходит увеличение масштаба. Пойдет как легкая альтернативная версия динамической карты Google.
Annotation Overlay Effect
![](https://habrastorage.org/storage/habraeffect/b4/32/b43294ab7a807b63c7fcab5fe3a8a75f.jpg)
Демо | Урок
Урок, который научит вас создавать эффект наложения аннотаций или заметок на страницу.
Embed Picasa Gallery
![](https://habrastorage.org/storage/habraeffect/7f/30/7f30088d36629cfc1a1188d3238cefb3.jpg)
Демо | Описание
Если вы используете PicasaWeb для хранения своих изображений, то этот плагин поможет интегрировать их с вашим сайтом.
Slider Gallery
![](https://habrastorage.org/storage/habraeffect/05/86/058606938c4e39368009c30f6319d4d7.jpg)
Демо | Урок
Интересная галерея с возможность горизонтального скроллинга превьюшек.
Quovolver
![](https://habrastorage.org/storage/habraeffect/11/d7/11d70f59dab1ece3815eb03d6c7a347f.jpg)
Демо + Описание
Quovolver является простым решением для элегантного отображения текста на вашей странице.
Compact News Previewer
![](https://habrastorage.org/storage/habraeffect/3a/4a/3a4a5cf95b598ef78789953ce127966e.jpg)
Демо | Урок
Новости и статьи в компактном виде с предварительным просмотром.
Style-my-tooltips
![](https://habrastorage.org/storage/habraeffect/19/67/1967565ba8b660e3c3c1257d34982c55.jpg)
Демо | Урок
Небольшой плагин для отображения подсказок. Если не настраивать стили будет отображена стандартная подсказка браузера.
Polaroid Photobar Gallery
![](https://habrastorage.org/storage/habraeffect/25/37/2537438f6ff8cf86fe0d14311e5112e9.jpg)
Демо | Урок
Галерея изображений с видом Polaroid. Возможность создания нескольких альбомов.
Full Page Image Gallery
![](https://habrastorage.org/storage/habraeffect/94/63/9463b71c8f42bd9396560d87d699bd91.jpg)
Демо | Урок
Потрясающая галерея с возможностью полно экранного просмотра и прокруткой эскизов.
Tiny Carousel
![](https://habrastorage.org/storage/habraeffect/b0/23/b023a0ab43f4ec2833bba52a8775ba7d.jpg)
Демо + Описание
Небольшой плагин для горизонтального и вертикального скроллинга изображений по таймеру или с помощью кнопки.
Collapsing Site Navigation
![](https://habrastorage.org/storage/habraeffect/b9/bd/b9bde2ed13ccdee2124edea817db2bf1.jpg)
Демо | Урок
Интересное меню для сайта. При наведении на пункт меню появляется подменю и картинка. При нажатии все пункты меню складываются, как колода карт с отображением информации о разделе.
Activity Indicator
![](https://habrastorage.org/storage/habraeffect/d1/83/d18385044ff7f06f35c41490b2b9e2ac.jpg)
Демо + Описание
Индикаторы загрузки. Использует SVG или VML. Никаких дополнительных изображений или внешних css не требует. Работает в IE6 (:
Creating a Stylish Coming Soon Page
![](https://habrastorage.org/storage/habraeffect/98/38/9838d2f8f874061a77028fbbd5e76836.jpg)
Демо | Урок
Быстро и легко создаем страницу заглушку для проекта, который находится на стадии разработки. Используется PHP, MySQL и jQuery.
Making Better Select Elements with jQuery and CSS3
![](https://habrastorage.org/storage/habraeffect/83/93/8393691280b03384517860cad9f2eea2.jpg)
Демо | Урок
Красивый и удобный выпадающий список, без потери функциональности.
Quick Feedback Form w/ PHP and jQuery
![](https://habrastorage.org/storage/habraeffect/da/64/da64fd715112bb7da1117ebc40984b0c.jpg)
Демо | Урок
Элегантная форма обратной связи. Используется jQuery и php класс PHPMailer.
Всем спасибо за внимание!