Много эффектов при наведении на ссылку.

[indorill.empty]

Здравствуйте, есть сайты: этот и этот. Делаю аналог таких эффектов. У меня при наведение на ссылку так же все картинки кроме той на которую :hover блюрятся и теряют прозрачность. Но сделал я это двумя кусками jquery кода:

прозрачностьjQuery(window).load(function(){	jQuery("a#kran").hover(		function(){		jQuery("img#kran").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#filter, img#nasos").animate({opacity: 0.6},{queue: false}, 100);		},		function(){		jQuery("img#kran").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#filter, img#nasos").animate({opacity: 1},{queue: false},{zIndex: 0}, 100);	});	jQuery("a#balon, a#balon2").hover(		function(){		jQuery("img#balon").animate({opacity: 1},{queue: false}, 100)		jQuery("img#kran, img#radiator, img#kotel, img#filter, img#nasos").animate({opacity: 0.6},{queue: false}, 100);		},		function(){		jQuery("img#balon").animate({opacity: 1},{queue: false}, 100)		jQuery("img#kran, img#radiator, img#kotel, img#filter, img#nasos").animate({opacity: 1},{queue: false},{zIndex: 0}, 100);	});	jQuery("a#radiator").hover(		function(){		jQuery("img#radiator").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#kran, img#kotel, img#filter, img#nasos").animate({opacity: 0.6},{queue: false}, 100);		},		function(){		jQuery("img#radiator").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#kran, img#kotel, img#filter, img#nasos").animate({opacity: 1},{queue: false},{zIndex: 0}, 100);	});	jQuery("a#kotel, a#kotel2").hover(		function(){		jQuery("img#kotel").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kran, img#filter, img#nasos").animate({opacity: 0.6},{queue: false}, 100);		},		function(){		jQuery("img#kotel").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kran, img#filter, img#nasos").animate({opacity: 1},{queue: false},{zIndex: 0}, 100);	});	jQuery("a#filter").hover(		function(){		jQuery("img#filter").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#kran, img#nasos").animate({opacity: 0.6},{queue: false}, 100);		},		function(){		jQuery("img#filter").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#kran, img#nasos").animate({opacity: 1},{queue: false},{zIndex: 0}, 100);	});	jQuery("a#nasos").hover(		function(){		jQuery("img#nasos").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#filter, img#kran").animate({opacity: 0.6},{queue: false}, 100);		},		function(){		jQuery("img#nasos").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#filter, img#kran").animate({opacity: 1},{queue: false},{zIndex: 0}, 100);	});});И блюр:jQuery(window).load(function(){	jQuery("a#kran").hover(		function(){		jQuery('spoiler').spoilerAlert()		jQuery("img#kran").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#filter, img#nasos").spoilerAlert({max: 5, partial: 0}, 100);		},		function(){		jQuery("img#kran").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#filter, img#nasos").spoilerAlert({max: 0, partial: 5}, 100);	});	jQuery("a#balon, a#balon2").hover(		function(){		jQuery('spoiler').spoilerAlert()		jQuery("img#balon").animate({opacity: 1},{queue: false}, 100)		jQuery("img#kran, img#radiator, img#kotel, img#filter, img#nasos").spoilerAlert({max: 5, partial: 0}, 100);		},		function(){		jQuery("img#balon").animate({opacity: 1},{queue: false}, 100)		jQuery("img#kran, img#radiator, img#kotel, img#filter, img#nasos").spoilerAlert({max: 0, partial: 5}, 100);	});	jQuery("a#radiator").hover(		function(){		jQuery('spoiler').spoilerAlert()		jQuery("img#radiator").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#kran, img#kotel, img#filter, img#nasos").spoilerAlert({max: 5, partial: 0}, 100);		},		function(){		jQuery("img#radiator").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#kran, img#kotel, img#filter, img#nasos").spoilerAlert({max: 0, partial: 5}, 100);	});	jQuery("a#kotel, a#kotel2").hover(		function(){		jQuery('spoiler').spoilerAlert()		jQuery("img#kotel").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kran, img#filter, img#nasos").spoilerAlert({max: 5, partial: 0}, 100);		},		function(){		jQuery("img#kotel").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kran, img#filter, img#nasos").spoilerAlert({max: 0, partial: 5}, 100);	});	jQuery("a#filter").hover(		function(){		jQuery('spoiler').spoilerAlert()		jQuery("img#filter").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#kran, img#nasos").spoilerAlert({max: 5, partial: 0}, 100);		},		function(){		jQuery("img#filter").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#kran, img#nasos").spoilerAlert({max: 0, partial: 5}, 100);	});	jQuery("a#nasos").hover(		function(){		jQuery('spoiler').spoilerAlert()		jQuery("img#nasos").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#filter, img#kran").spoilerAlert({max: 5, partial: 0}, 100);		},		function(){		jQuery("img#nasos").animate({opacity: 1},{queue: false}, 100)		jQuery("img#balon, img#radiator, img#kotel, img#filter, img#kran").spoilerAlert({max: 0, partial: 5}, 100);	});});

Моя проблема заключается в том что я не могу додуматься как обьеденить их. + мне нужно что бы та картинка на ссылку которой наводишь становилась z-index: 999 а все остальные z-index: 0.

 

Подскажите пожалуйста - как это можно сделать.

 

Потом же я ещё буду делать при клике всплывающее окно с текстом - но это уже не так сложно - можно и отдельным скриптом сделать.

[swandev]

$("div img").hover(function(){   $("div img").css('z-index','0');   $(this).css('z-index','999');},function(){   $("div img").css('z-index','1'); //возвращаем нормальное состояние})

как-то так

[indorill.empty]

$("div img").hover(function(){   $("div img").css('z-index','0');   $(this).css('z-index','999');},function(){   $("div img").css('z-index','1'); //возвращаем нормальное состояние})

как-то так

 

Не вышло.

jQuery("a.ac //селектор").hover(function(){jQuery("a.ac img //обьект с которым будет оперировать функция").css('z-index','0');jQuery(this).css('z-index','999');},function(){jQuery("a.ac img").css('z-index','1'); //возвращаем нормальное состояние})

Так же?

з.ы.: комментариев в функции естественно нету)

Edited December 13, 2013 by indorill.empty