пятница

И до jQuery руки добрались

Наконец-то, как давно я уже хотел начать делать что-то простенькое на джей квери.. и наконец-то сегодня это случилось.

Решил поделится своим небольшим вхождением в этот большой для меня фрейм ворк? а именно.

На 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, так как сам с ней только что подружился. Будем считать, я просто поделился радостью.

А во вторых, Блоггер не дает мне удобно выводить код. На него неудобно смотреть, вставил его как текст…

Будут вопросы, пишите в комментарии. Именно с этим эффектом, помогу Улыбка

blog comments powered by Disqus