Le filtre jQuery .not() ne fonctionnera pas

Question

J'ai essayé plusieurs méthodes pour filtrer une classe à partir d'une sélection, y compris filter() et find() mais je n'arrive pas à la faire fonctionner. J'essaie de créer une fonction «Lights Out» pour la vidéo actuellement visionnée. C'est un simple code, je dois faire quelque chose de fondamentalement faux ...

Vous pouvez voir le code sur www.jaygeorge.co.uk/gwennan-sage/showreel. Que se passe-t-il? Lorsque vous passez la souris sur la barre 'Lights Out', tout devrait disparaître SAUF la vidéo la plus proche qui a une classe 'jouée' dessus.

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

});

Answer 1

Vous avez mal compris la .not method:

Etant donné un objet jQuery qui représente un ensemble d'éléments DOM, le procédé .not() construit un nouvel objet jQuery à partir d'un sous-ensemble des éléments correspondant à . Le sélecteur fourni est testé contre chaque élément; les éléments qui ne correspondent pas au sélecteur seront inclus dans le résultat.

Cela signifie que votre requête $('body').not('.playing') sélectionne tous les corps quine font pas partie de la classe.playing. En ce qui concerne l'effet d'extinction, il est généralement mis en œuvre en créant une div de 100% de largeur et 100% de hauteur superposée au reste du contenu.

Answer 2

Modifier cette ligne

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

à cette

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

Answer 3

code final pour tous ceux qui cherchent à ce sujet. Solution prise de 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(); 
    }); 
}); 

et le 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; 
}