Question

如何缓慢地对此进行缓慢的调整（使图像没有变暗）？
如何让鼠标在所有图像上快速移动时不会破坏和重复？

$('.member>img').hover(function () {
                            $('.member>img').css('filter', ' blur(2px) grayscale(50%) brightness(80%)')
                            $(this).css('filter', ' blur(0px) grayscale(0%) brightness(100%)');
                        }, function () {
                            $('.member>img').css('filter', ' blur(0px) grayscale(0%) brightness(100%)');
                        });

我试过这个

$('.member>img').hover(function () {
                $('.member>img').one().css('filter', ' blur(2px) grayscale(50%) brightness(80%)')
                $(this).one().css('filter', ' blur(0px) grayscale(0%) brightness(100%)');
            }, function () {

                var grayscale = 50;
                var brightness = 80;
                var blur = 0; /*figure out blur later*/

                for (brightness = 80; brightness <= 100; brightness++) {
                    setTimeout(function () {
                        $('.member>img').one().css('filter', ' blur(0px) grayscale(' + grayscale + '%) brightness(' + brightness + '%)');
                    }, 500);
                    grayscale -= 2.5;
                }
            });

但它只是在完成所有事情之前等待一段时间（不是逐渐地）

Answer 1

编辑：我删除了opacity属性，并使用::after和background-color: rgba()属性。结果是我能得到的最接近的结果。请参阅Codepen上编辑过的代码。

为什么要尝试使用普通css实现的复杂化。我认为 this 几乎就是你想做的事情。我不能根据描述为您提供准确的工作代码，但我希望您有想法或解决方案。我认为使用普通的css解决方案更加美观和直接。

请查看下面的代码。

HTML：

<div class="holder">
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
</div>

CSS：

/* setting background color to make it dark */
.holder {
  background-color: #000;
  width: 615px;
  margin-left: auto;
  margin-right: auto;
}

/* frame for the image making it responsive  I guess */
.img {
  width: 150px;
  height: 150px;
  display: inline-block;
    transition: opacity .7s;

}
/* THE TRICK */
  /* dim the image container when hovered */
  .holder:hover .img  {
    opacity: 0.3;
    transition: opacity 0.7s;
  }

  /* make the currently hovered image visible */
  .holder .img:hover  {
    opacity: 1;
    cursor: pointer;
  }
/* END OF THE TRICK */

/* resize the image to fit the frame width maintaining the aspect ratio  */
.img img {
  width: 100%;
}

如何为无法动画的内容进行缓慢转换？

1 个答案: