Фильтр jQuery .not () не будет работать - PullRequest
Новая
       15

Фильтр jQuery .not () не будет работать

0 голосов
/ 20 марта 2011

Я пробовал довольно много способов отфильтровать класс из выбора, включая filter () и find (), но не могу заставить это работать.

Я пытаюсь создатьФункция «Отключение света» для текущего просматриваемого видео.Это простой кусок кода, я, должно быть, делаю что-то в корне неправильно ...

Вы можете увидеть код на сайте www.jaygeorge.co.uk/gwennan-sage/showreel.

Что должно произойти: при наведении курсора на панель «Подсветка» все должно исчезнуть, КРОМЕ ближайшего видео, на котором есть класс «воспроизведения». 

$(document).ready(function(){
$(".lightsout").hover(function() {
    $(this).next().addClass('playing');     
    $('body').not(".playing").animate({opacity: 0, backgroundColor: 'black'}, 1000);
});

});

Ответы [ 3 ]

3 голосов
/ 20 марта 2011

Вы неправильно поняли метод .not :

Учитывая объект jQuery, который представляет набор элементов DOM, .not() метод создает новый объект jQuery из подмножества соответствия элементы. Поставляемый селектор проверено на каждый элемент; элементы, которые не соответствуют селектору будет включен в результат.

Это означает, что ваш запрос $('body').not('.playing') выбирает все тела, которые не принадлежат классу .playing.

Что касается эффекта выключения света, обычно это реализуется путем создания 100% ширины, 100% высоты, которая находится над остальным содержимым.

2 голосов
/ 20 марта 2011

Изменить эту строку 

$('body').not(".playing").animate({opacity: 0, backgroundColor: 'black'}, 1000);

к этому 

$('body *').not(".playing").animate({opacity: 0, backgroundColor: 'black'}, 1000);
1 голос
/ 21 марта 2011

Финальный код для всех, кто смотрит на это. Решение взято из http://www.jankoatwarpspeed.com/post/2009/05/17/Use-jQuery-to-turn-off-the-lights-while-watching-videos.aspx

//=Jay. Create div before Showreel.
$(document).ready(function(){
    $('.videopress').before("<div class='lightsout'><p>Once the video starts playing hover your mouse here to dim the lights.</p></div>");
    $('body').before("<div id='curtain'></div>");
});

//=Jay. Showreel Curtain down
$(document).ready(function(){
    $(".lightsout").hover(function(){
        $(this).next().addClass('playing');
        $('#curtain').delay(500).fadeIn();
    }, function(){
        $(this).next().removeClass('playing');
        $('#curtain').fadeOut();
    });
});

и CSS ... 

/*=Jay. IE6 doesn't support Fixed positioning which is needed for the curtain below.*/
.ltie7 .lightsout {
    display: none;
}

.lightsout:hover {
    cursor: none;
}

#curtain {
    position: fixed;
    display: none;
    left:0; 
    top:0; 
    width:100%; 
    height: 100%;
    z-index:1000;
    background: black;
}

.playing {
    position: relative;
    z-index: 1001;
}
...