Подсвечивание картинок. jQuery

24.06.2013  17:18

Как сделать простую анимацию подсвечивания превьюшек в фотогалерее? Качать для этого плагины — ставить антикрыло и движок от BMW на отечественное ведро.

Вариант первый: работа по двум событиям. Мышка над картинкой — подсветить, мышка ушла — вернуть как было.

$(document).load(
	$(function(){
	if($(".photo_list img").length){
		$(".photo_list img").live("mouseover", function(){
			$(this).addClass("over");
		});
		$(".photo_list img").live("mouseout", function(){
			$(this).removeClass("over");
		});
	}
 })
);

А в css, например, рамка добавляется или меняется прозрачность:
.photo_list img.over {
opacity: 0.90;
ms-filter: 'Alpha(Opacity=90)';
-moz-opacity: 0.90;
filter:alpha(opacity=90);
-khtml-opacity: 0.90;
}
Куча костылей под разные браузеры.

Вариант второй: лёгкое мигание при наведении курсора.

$(document).load(
	$(function(){
		if($(".photo_list img").length){
			$(".photo_list img").live("mouseover", function(){
				var cImg = $(this);
				cImg.animate({opacity: 0.9}, 500, 'linear', function() {
					cImg.animate({opacity: 1});
				});
			});
		}
 })
);


Метод animate позволяет творить чудеса и с помощью него можно сделать достаточно хитрую анимацию. В данном случае картинка в блоке
по наведению обесцвечивается, и сразу возвращается в обратное состояние.

И да, if($(".photo_list img").length){ нам нужен чтобы сначала проверить существование элемента на странице. Вот и всё шаманство:

Двойка Су-27, Авиация


перейти в Блог | Блог (стр. 15)

Ударим лайками по бездорожью, разгильдяйству и бюрократизму!


Ключевые слова (тэги): JavaScript 24  jQuery 19  web-программирование 76  лучшее 10  

Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю:
Имя


email (не публикуется)