Question

我已经尝试了很多方法从选择中过滤掉一个类，包括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);
});

}）;

Answer 1

你误解了.not method：

给出一个代表的jQuery对象一组DOM元素，.not() method构造一个新的jQuery对象来自匹配的子集元素。提供的选择器是测试每个元素;该与选择器不匹配的元素将包含在结果中。

这意味着您的查询$('body').not('.playing')会选择 不属于该 .playing的所有主体。

对于熄灯效果，通常通过创建100％宽度，100％高度div来实现，该div位于其余内容之上。

Answer 2

更改此行

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

到这个

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

Answer 3

任何看这个的人的最终代码。解决方案取自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;
}

jQuery .not（）过滤器不起作用

3 个答案: