En utilisant jQuery pour réduire l'opacité d'autres éléments avec un div

Question

J'ai un bloc d'images avec des légendes et je utilise slideToggle pour afficher et masquer les sous-titres:

$('.imageholder').hover(function() { 
    var $desc = $(this).next(); 
    $('.description').not($desc).slideUp('fast'); 
    $(this).next().slideToggle("fast"); 
    }); 

travail Fiddle

Lorsqu'une image est cliqué, la légende va révéler mais je veux réduire simultanément l'opacité des autres images dans la div contenant (quelque chose comme this). J'apprécierais de l'aide. Merci.

Answer 1

Avec la fonction de survol, vous pouvez ajouter une fonction pour ramener votre opacité à 1 lorsque vous ne planez pas votre élément. (Ici: https://api.jquery.com/hover/)

Vous pouvez essayer ceci:

$('.imageholder').hover(function() { 
 
    var $desc = $(this).next(); 
 
    $('.description').not($desc).slideUp('fast'); 
 
    $(this).next().slideToggle("fast"); 
 
    $(this).siblings('.imageholder').css({opacity: 0.2}); 
 
},function(){ 
 
    $(this).siblings().css({opacity: 1}); 
 
});

.description { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="imageswrapper"> 
 
</div> 
 
<div class="imageholder"> 
 
    <img class="img" src="http://placehold.it/350x150" alt="Placeholder"> 
 
</div> 
 
<div class="description"> 
 
    <p>Text</p> 
 
</div> 
 
<div class="imageholder"> 
 
    <img class="img" src="http://placehold.it/350x150" alt="Placeholder"> 
 
</div> 
 
<div class="description"> 
 
    <p>Text</p> 
 
</div> 
 
<div class="imageholder"> 
 
    <img class="img" src="http://placehold.it/350x150" alt="Placeholder"> 
 
</div> 
 
<div class="description"> 
 
    <p>Text</p> 
 
</div> 
 
</div>

Answer 2

Pouvez-vous essayer d'ajouter $(this).siblings().css({opacity: 0.5}) mais je ne pense pas que vous soyez à la recherche d'opacité ici, c'est plutôt un filtre en noir et blanc plutôt qu'en alpha.

Answer 3

Vous pouvez exclure l'élément courant d'un sélecteur jQuery comme ceci:

$('.imageholder').not(this) 

est ici un violon montrant les images fading out (vous devrez les effacer de nouveau lorsque vous passez la souris sur): https://jsfiddle.net/euphemus/bdfv9vg8/3/