Using jQuery to reduce opacity of other elements with a div

Question

I have a block of images with captions and am using slideToggle to show and hide the captions:

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

Working Fiddle

When an image is clicked, the caption will reveal but I want to simultaneously reduce the opacity of the other images in the containing div (something like this ). Would appreciate some help. Thanks.

Answer 1

With the hover function you can add a function to get your opacity back to 1 when your are not hovering your element. (Here: https://api.jquery.com/hover/ )

You can try this:

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

您可以尝试添加$(this).siblings().css({opacity: 0.5})但我不认为您在此处查找不透明度，它更像是对黑白的过滤器，而不是alpha。

Answer 3

You can exclude the current element from a jQuery selector like so:

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

Here's a fiddle showing the images fading out (you'll have to fade them back up when you mouse out): https://jsfiddle.net/euphemus/bdfv9vg8/3/