Плавное изменение прозрачности любого элемента на jQuery

Автор: Admin    Категория: Магия ЯваСкрипт / jQuery    Теги:  Прозрачность    Дата: 21-02-2011, 00:55
Плавное изменение прозрачности любого элемента на jQueryПрименяем плавное изменение прозрачности любого элемента на jQuery при наведении
Плавная jQuery прозрачность любого элемента всё очень просто и эффектно.
Представляю вашему вниманию самый простой способ плавного изменения прозрачности любого элемента без использования CSS, чисто на jQuery.
Прозрачность можно задать любому элементу на странице, достаточно просто ему прописать нужный class.
Реализация:

Если ещё не подключена - то, в шапку сайта, подключаем библиотеку jQuery с серверов yandex:

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


Туда же(в шапку) подключаем скрипт управления прозрачностью:

<script type="text/javascript">
//jQuery прозрачность любого элемента от http://megaweb.su/
$(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); - элемент возвращается к начальной прозрачности когда курсор уходит с элемента

Теперь достаточно прописать class="megaweb" любому нужному элементу, примерно так:

<h1 class="megaweb">MegaWeb.su</h1>

или
<img class="megaweb" src="megaweb.png" width="600" height="140" alt="megaweb.su - уютный уголок для web-мастера" />

Но не стоит увлекаться применением такой прозрачности большим блокам, сайт будет тормозить.

Вот и всё!

Посмотреть пример плавное изменение прозрачности любого элемента на jQuery

Пользуйтесь на здоровье! Не забываем комментировать и добавлять новость в закладки.
Версия для печати
  • 100
     Просмотров: 20 983      Комментариев: 2   

Понравилась новость Плавное изменение прозрачности любого элемента на jQuery на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

Другие новости по теме

Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Плавное изменение прозрачности любого элемента на jQuery из категории Магия ЯваСкрипт / jQuery

№ 2 Автор: Admin 14 августа 2012 22:01

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: nthanter
а как прописать этот эффект к счётчику?

<div class="megaweb">код счётчика</div>


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 1 Автор: nthanter 14 августа 2012 20:23

 Вот такой я - nthanter

nthanter
Гости
комментариев
публикаций

Статус:
а как прописать этот эффект к счётчику?

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус