Плавное изменение прозрачности фона


Продолжая тему прозрачности элементов при наведении еще один примерчик применения этого приема для usability на страничке, предложил все тот же David Walsh используя jQuery.

При наведении курсора на DIV (в данном примере) c классом "opacity", плавно меняется свойство стиля opacity с 0,7 на 0,9. Все достаточно просто:

<script type="text/javascript">
$(document).ready(function() {
var opacity = 0.7, toOpacity = 0.9, duration = 250;
$('.opacity').css('opacity',opacity).hover(function() {
$(this).fadeTo(duration,toOpacity);
}, function() {
$(this).fadeTo(duration,opacity);
}
);
});
</script>

И походу в коде:

<div style="opacity: 0.7;" class="opacity">
…
</div>

Более подробно смотрите пример плавного изменения прозрачности фона на jQuery.

Или скачайте архив с примером.

,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 7, в среднем: 3.86 из 5)
Loading ... Loading ...


  1. #1 GM2mars - Ноябрь 23rd, 2012 at 20:13

    Хм, что то я так и не увидел изменение прозрачности ФОНА.

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.