Web notes

Продолжая тему прозрачности элементов при наведении еще один примерчик применения этого приема для 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.

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