Наконец-то, как давно я уже хотел начать делать что-то простенькое на джей квери.. и наконец-то сегодня это случилось.
Решил поделится своим небольшим вхождением в этот большой для меня фрейм ворк? а именно.
На tellme.org.ua справа есть виджеты, я сделал так, чтобы они при наводке мышкой, мягко ставали видимыми. Очень просто и банально, для тех кто в этом шарит все просто, но для меня как полного нуба, это уже что-то.
В общем как это делалось, напишу ниже, в принципе не так уже и сложно…
В начале сложим алгоритм действий по которому будем двигаться:
1. Подключить jQuery к странице
2. Сказать jQuery с какими классами, что мы будем делать
3. Прописать код
4. Проверить, поправить и радоваться 
Итак первое, подключение jQuery
Есть 2 способа как это сделать.
Первый: скачать фреймворк с официального сайта, кинуть на хостинг и прописать в файле адрес к нему…
Второй: воспользоваться Гугловским jQuery. Гугл сам всегда хранит версию фреймворка на своих серверах, и чтобы нам лишний раз не нагружать свой сервер, можно взять кэшированную версию у гугле, и быстрее и качественней
Нужно только прописать строчку между тегом <head></head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
Я так и сделал, проблем не возникло, идем дальше…
Дальше нам нужно узнать какие эффекты и к чему мы хотим их применять. В моем случае это были виджеты.
Каждый виджет в боковой панеле имеет у меня класс СSS .widget.
Изначально он имеет свойство opacity:0.3; C помощью jQuery мы сделаем, чтобы когда мы наводили мышкой на виджет, он плавно менял свое значение на opacity:1;
В общем со вторым пунктом тоже разобрались.
Переходим к коду. Как это выглядит на синтаксе jQuery
<script type="text/javascript">
$(document).ready(function(){$('.widget').hover(function(){
$(this).animate({ opacity: "1" });
},function(){
$(this).animate({ opacity: "0.3" });
});});
</script>
Жирным я выделил основные моменты. Этот код можно вставить непосредственно уже в html разметке страницы, где-то в теге <body>
Первая строчка означает, что как только страница загрузится полностью, к ней будет прикреплена функция…
К элементов с классом .widget – когда на них наведена мышка, то есть :hover мы делаем .animate = opacity: "1" –делаем полностью видимыми.
А когда курсор покидает объект, срабатывает вторая часть кода, где написано, вернуть opacity до 0.3.
$(this).animate({ opacity: "0.3" });
Вот в принципе и все. Работает все отлично. Если чего то не понятно – сильно не пинайте, мне во-первых трудно писать о jQuery, так как сам с ней только что подружился. Будем считать, я просто поделился радостью.
А во вторых, Блоггер не дает мне удобно выводить код. На него неудобно смотреть, вставил его как текст…
Будут вопросы, пишите в комментарии. Именно с этим эффектом, помогу
Все типа, приехали, это самая последняя строчка на сайте.