javascript image rollover

Question

Привет У меня вопрос об обращении с изображениями, но это не так, как вы думаете.

Я видел пример http://www.asos.com/ и нажмите на кнопку домой (верхней нав крайнюю слева)

Вы можете видеть, что при опрокидывании изображения, изображение остается подсвеченным и другие темнеть.

Я знаю, что это было сделано с помощью jquery, но код очень грязный. Кто-нибудь видел это раньше или знает, как это сделать?

Благодаря

Answer 1

Быстрое решение (оно может быть настроен короче я думаю):

<div class="images"> 
    <img src="http://www.google.com/google.jpg" /> 
    <img src="http://www.google.com/google.jpg" /> 
    <img src="http://www.google.com/google.jpg" /> 
    <img src="http://www.google.com/google.jpg" /> 
</div> 

<script type="text/javascript"> 
$().ready(function(){ 
    $('.images img').hover(
     function(){ 
      $(this).parents('.images').find('img').not(this).animate({"opacity": "0.3"}, 200); 
      $(this).animate({"opacity": "1"}, 200); 
     }, 
     function(){ 
      $(this).animate({"opacity": "1"}, 200); 
     } 
    ); 
$('.images').bind('mouseleave',function(){$(this).find('img').animate({"opacity": "1"}, 200);}); 
}); 

Answer 2

Прежде всего: Firebug является вашим другом. Используемая техника проще, чем можно было бы подумать: они просто уменьшают непрозрачность изображений до 0,3. Когда фон черный, изображения становятся затемненными. Таким образом, код может выглядеть примерно так:

$('img.fade').live('mouseover', function (e) { 
    var $this = $(this).fadeTo(500, 1.0); 
    $('img.fade').not($this).fadeTo(500, .3); 
); 
$('img.fade').live('mouseout', function (e) { 
    var $this = $(this); 
    $('img.fade').not($this).fadeTo(500, 1.0); 
);