Не удается сделать undelegate
Подскажите,плз...
Вот есть набор фоток, у первой непрозрачность 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 и не валять дурака. Это глупо писать для такой мелочи столько лишнего кода.
|
1) используйте CSS3 Transition, браузеры которые не поддерживают это свойство, будут просто менять прозрачность без анимации
2) привидете пример когда функция jQuery возращает null |
ваый,
А можно поподробнее. Ведь в конечном счете, 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);
});
|
Цитата:
|
<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>
|
Спасибо за советы. В итоге, так и сделал, подсветку через hover, а обработку клика через toggleClass и removeClass.
|
| Часовой пояс GMT +3, время: 07:52. |