При регистрации по этой ссылке всем
автоматически предоставляется скидка!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник
Mega
Web
.su
, пожалуйста, а ещё лучше - поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Плавное изменение прозрачности любого элемента на jQuery
21-02-2011, 00:55
Применяем плавное изменение прозрачности любого элемента на 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>
//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
Пользуйтесь на здоровье! Не забываем комментировать и добавлять новость в закладки.
Просмотров: 4920 Комментариев: 0
Понравилась новость? Сохрани в закладках!
Другие новости по теме:
- Плавное изменение прозрачности элемента на javascript
- Tooltip для увеличения картинки на jQuery
- Кнопка Выключить свет на jQuery для онлайн кинотеатров
- Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
- Плавное увеличение картинки при наведении на jQuery
- Стильные табы вкладки на CSS и jQuery v1.6.1
- Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
- Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки
- CSS3 горизонтальное выпадающее меню в стиле web 2.0
- Простой слайдер на jQuery
Информация
