19 июля 2013
7356
изменение прозрачности, jquery

Изменение прозрачности JQuery

JQuery
Демонстрация » Скачать »

В этом уроке мы рассмотрим пример изменения прозрачности JQuery. Подобная тематика уже обсуждалась в уроке смена картинки при наведении курсора на HTML и CSS, ну там принцип работы скрипта был основан на простом CSS и html, в данном уроке затронут еще и JQuery плюс ко всему, там была простая смена картинки при наведении, тут же выполняется прозрачность (opacity). 

Я думаю, что Вы уже посмотрели два демо и поняли разницу работы скриптов. Давайте теперь разберем код данного урока.

 

Первый шаг. HTML.

 

И так у нас имеется файл index.php.

 

В нем сначала мы подключаем библиотеку jquery.js. Скачайте её себе и подключите между тегами head.

 

​<script type="text/javascript" src="jquery.js"> </script>

 

Далее разберем JQyery код, который будет взаимодействовать с классом img. Для начала прописываем функцию, которая имеет класс img и задаем прозрачность 50% в изначальном положении. То есть изображение без наведения на него, имеет прозрачность на половину от его возможности. Затем, когда на изображение совершено действие наведения, вызывается функция, которая переключает положение класса img в положение снятия прозрачности. После завершения наведения на изображение, функция переключается в исходное изначальное положение. Атрибут прозрачности изображения opacity. Можете подробно изучить его в документации по CSS.

 

$(function() {
// устанавливаем прозрачность изображения на 50%
$(".img").css("opacity","0.5");

// выполняем наведение мыши на изображение
$(".img").hover(function () {
// после чего прозрачность исчезает
$(this).stop().animate({
opacity: 1.0
}, "slow");
},

// после снятия наведения мыши на изображение
function () {

// прозрачность возвращается в исходное положение 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});

 

 

Второй шаг. Файл стилей CSS.

 

Прописываем тег div и задаем ему класс images в нем укажем немного стилей CSS для изображения (пожеланию, просто так лучше видно как работает данный скрипт). Теперь прописываем тег img в нем указываем путь к изображению и задаем класс img, который взаимодействует с JQuery кодом выше.

<div class="images"><img src="http://www.roothelp.ru/logo.png" class="img"/></div>

 

Немного стилей CSS для лучшей наглядности.

 

.images {
border: 1px solid #363636;
width: 300px;
background-color: #2d2d2d;
padding: 8px;
}

 

Скрипт является простым своего рода, что делает его более актуальным в применении изменения прозрачности изображения при наведении. Советую Вам поиграться с JQyery кодом, где имеются три функции изначальное, при наведении и со снятия наведения. Можно будет проявить разнообразие. Допустим, в изначальном положении указать opacity 0.5, при наведении opacity 1.0, а со снятия наведения opacity 0.2. Получится своего рода очень интересные действия с изображением!

 

Спасибо Вам за внимание, всего наилучшего! Изучайте, делитесь, экспериментируйте!