В этом уроке мы рассмотрим пример изменения прозрачности JQuery. Подобная тематика уже обсуждалась в уроке смена картинки при наведении курсора на HTML и CSS, ну там принцип работы скрипта был основан на простом CSS и html, в данном уроке затронут еще и JQuery плюс ко всему, там была простая смена картинки при наведении, тут же выполняется прозрачность (opacity).
Я думаю, что Вы уже посмотрели два демо и поняли разницу работы скриптов. Давайте теперь разберем код данного урока.
И так у нас имеется файл 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");
});
});
Прописываем тег 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. Получится своего рода очень интересные действия с изображением!
Спасибо Вам за внимание, всего наилучшего! Изучайте, делитесь, экспериментируйте!