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

Разместил / Просмотров: 2 890 / комментария 2

И снова приветствую Вас дорогие читатели блога 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>

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

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

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

  • $(‘.megaweb’) — это название класса, который будет применяться к веб элементам;
  • animate({opacity:’0.3′},1); — это самая оптимальная прозрачность элемента;
  • animate({opacity:’1.0′},600); — прозрачность веб — элемента при наведении;
  • animate({opacity:’0.3′},300); — возвращение элемента к самой первой прозрачности, после того как курсор убран с элемента.

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

<h3 class=»megaweb»>http://beloweb.ru/</h3>

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

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

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

<div class="megaweb">

веб - элемент

</div>

Пример

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

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

  • Александр

    Все хорошо, только у вас на странице он не работает..

  • Александр, после смены дизайна, убрались все лишние скрипты. Уверяю пример рабочий, нужно будет просто отдельную страницу сделать.