CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 247   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

5

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

Jemand 12584 ,
JavaScript

С помощью данной несложной конструкции можно задать прозрачность любому элементу Вашей страницы добавив к нему лишь определённый класс.
1. Подключение jQuery

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Данный код размещаем в разделе <head> Вашей страницы.
Скачать jQuery можно здесь.
2. JavaScript

<script type="text/javascript">
$(document).ready(function(){
$('.limp').each(function(){ // В данной строке limp - название Вашего класса для создания прозрачности.
      $(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>

Данный код размещаем также в разделе <head> но после кода подключения jQuery.
Код содержит комментарии, так что разобраться очень просто.
3. Подключение прозрачности к элементу
Для подключении прозрачности элементу, достаточно присвоить ему класс указанный в JavaScript коде, например:

<img src="image" class="limp">

Демо

Рекламная пауза

» 5 комментариев

  1. Класс!
    Мне нравиться.
    Правда, в IE 8.0 прозрачность текста на демостранице не работает.
    Ну, а Опера 10.63, FF 2.0, Chrome 13.0 – всё отлично!

    Спасибо, Братцы.

  2. Я практически случайно зашел на этот сайт, но задержался тут надолго. Задержался, потому что все очень интересно. Обязательно скажу о вас всем своим друзьям.


Оставить комментарий