jQuery Mit Opazität von anderen Elementen mit einem div zu reduzieren

Question

Ich habe einen Block von Bildern mit Bildunterschriften und slideToggle bin mit dem Untertitel ein- und ausblenden:

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

Fiddle

Arbeiten Wenn ein Bild geklickt, die Beschriftung wird angezeigt, aber ich möchte gleichzeitig die Deckkraft der anderen Bilder in der enthaltenen div (etwas wie this) reduzieren. Würde mich über Hilfe freuen. Vielen Dank.

Answer 1

Mit der Hover-Funktion können Sie eine Funktion hinzufügen, um Ihre Deckkraft wieder auf 1 zu bringen, wenn Sie Ihr Element nicht bewegen. (Hier: https://api.jquery.com/hover/)

Sie können dies versuchen:

$('.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

Können Sie versuchen, $(this).siblings().css({opacity: 0.5}) hinzufügen, aber ich glaube nicht, dass Sie hier nach Opazität suchen, es ist eher ein Filter für Schwarz und Weiß als das Alpha.

Answer 3

Sie können das aktuelle Element aus einem jQuery-Selektor wie so auszuschließen:

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

Hier ist eine Geige die Bilder zeigen Ausblendung (Sie werden sie müssen verblassen zurück, wenn Sie die Maus aus): https://jsfiddle.net/euphemus/bdfv9vg8/3/