wb_sunny

Как сделать плавную прозрачность веб — элемента с помощью JQuery

3 346 любопытных

И снова приветствую Вас дорогие читатели блога beloweb.ru. Сегодня я хочу рассказать Вам как сделать плавную прозрачность любого элемента на сайте с помощью JQuery. Что значит для любого элемента? А значит это то, что данную прозрачность Вы сможете применить к любым картинкам, счётчикам, а также тегам на сайте. Всё это просто украсит Ваш ресурс. В общем давайте будем начинать.

Напомню, что скриптом с нами поделился megaweb.su, за что ему огромное спасибо.

Скрипт

Самое первое, что нужно сделать — это подключить библиотеку jQuery, в смысле, скрипт, которые ниже нужно поставить между тегами <head> и </head>.

<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>

Затем, туда же перед тегом </head> нужно скопировать и вставить следующий jQuery скрипт:

<script type="text/javascript">;
$(document).ready(function(){
$('.megaweb').each(function(){
$(this).animate({opacity:'0.3'},1);
$(this).mouseover(function(){
$(this).stop().animate({opacity:'1.0'},600);
});
$(this).mouseout(function(){
$(this).stop().animate({opacity:'0.3'},300);
});
});
});
</script>

Скопировали? Поздравляю большую часть работы Вы уже сделали :-)

Настройка скрипта

Данный скрипт Вы полностью можете настроить под свой вкус.

После того как мы настроили скрип как нам нужно, его можно применять к элементам веб — дизайна с помощью класса, например:

<h3 class=»megaweb»>https://beloweb.name/</h3>

Или к картинке

<img class=»megaweb» src=»primer.png»/>

Или же с помощью тега <div>

<div class="megaweb">

веб - элемент

</div>

Пример

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

До скорых встреч, друзья.

#Похожее: