Не удается сделать undelegate

[mikel]

Подскажите,плз...
Вот есть набор фоток, у первой непрозрачность 1, у остальных по 0.6.
На все, кроме первой, вешаюся события mouseout и mouseover, меняющие непрозрачность с 0.6 до 1 и обратно. Пытаюсь по клику на фотке отвязать mouseout от кликнутой фотки, чтобы непрозрачность оставалась 1. Но почему-то не срабатывает.

$(document).ready(function () {
            function imgOver() {
                $(this).animate({ opacity: '1.0' }, 100);
            }

            function imgOut() {
                $(this).animate({ opacity: '0.6' }, 100);
            }

            if ($('.detail-foto-list img') != null) {
                var i = 0;
                $('.detail-foto-list img').each(function () { //Начало цикла 1
                    $(this).css('cursor', 'pointer');

                    if (i > 0) {
                        $(this).animate({ opacity: '0.6' }, 1);
                        $("body").delegate("#img" + (i + 1), "mouseover", imgOver);
                        $("body").delegate("#img" + (i + 1), "mouseout", imgOut);

                        $("body").delegate("#img" + (i + 1), "click", function () {
                            $("body").undelegate("#img" + (i + 1), "mouseout", imgOut);
                        });
                    }
                    i++;
                }); //Конец цикла 1
            }
        });

[ваый]

Лучше сделать через css и не валять дурака. Это глупо писать для такой мелочи столько лишнего кода.

[nikita.mmf]

1) используйте CSS3 Transition, браузеры которые не поддерживают это свойство, будут просто менять прозрачность без анимации
2) привидете пример когда функция jQuery возращает null

[mikel]

ваый,
А можно поподробнее. Ведь в конечном счете, CSS все равно придется менять либо чистым js, либо jquery, и кода будет столько же. Например, создать класс типа

.transp
{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}

и ему присваивать при mouseout?

nikita.mmf,
Так функция нигде null и не возвращает, тут проблема, как отвязать от изображения события mouseout и mouseover по клику на нем.

То есть, почему не срабатывает вот этот кусок

$("body").delegate("#img" + (i + 1), "click", function () {
	                            $("body").undelegate("#img" + (i + 1), "mouseout", imgOut);
	                        });

[Sweet]

Ведь в конечном счете, CSS все равно придется менять либо чистым js, либо jquery

Не обязательно. Для этого можно использовать псевдокласс :hover.

[ваый]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<style>
.image {width: 50px; height: 50px; background-color: #333; margin: 0 2px; display: inline-block;}

.image {opacity: 0.6;}
.image:hover, .image.active {opacity: 1;}
</style>

<span class="image"></span>
<span class="image"></span>

<script>
$('.image').click(function() {
    $(this).toggleClass('active');
});
</script>

[mikel]

Спасибо за советы. В итоге, так и сделал, подсветку через hover, а обработку клика через toggleClass и removeClass.