Эффект при наведении
Добрый день!
У меня есть список с картинками. Я хочу чтобы при наведении другие затемнялись, а когда убирал мышь, то все возвращалось на место. Все работает, но криво. Если водить мышкой по нескольким картинкам подряд (пока не закончится анимация), то все моргает. Вот скрипт обработки:
jQuery(document).ready(function() {
$(document).on('mouseenter', "#carousel li", function(){
var $this = $(this);
$this.addClass('selected');
$anim1.stop();
$this.fadeTo('100',1);
$("#carousel li").not('.selected').fadeTo('100',0.2);
}).on('mouseleave', "#carousel li", function(){
var $this = $(this);
$this.removeClass('selected');
$anim1=$("#carousel li").not('.selected').fadeTo('100',1);
});
});
|
jQuery(document).ready(function() {
$(document).on('mouseenter', "#carousel li", function(){
var a = $(this);
a.addClass('selected');
a.stop().fadeTo('100',1);
$("#carousel li").not('.selected').stop().fadeTo('100',0.2);
}).on('mouseleave', "#carousel li", function(){
var a= $(this);
a.removeClass('selected');
$("#carousel li").not('.selected').stop().fadeTo('100',1);
});
});
|
Большое спасибо! То что надо )
|
Вот еще одно решение с использованием CSS
<style> .pict{display:inline;} .pict:hover img:not(:hover) {opacity:0.1} </style> <div class="pict"> <img src="GoldBig.jpg"></img> <img src="Erebuni.jpg"></img> <img src="Chani.jpg"></img> </div> |
| Часовой пояс GMT +3, время: 09:31. |