jquery - 如何更改悬停时的图像源？

Question

我想使用 jQuery 但带有动画来更改图像源。

我有一个默认的直 View 像。我有 5 张不同的图像，头部看着不同的方向。将鼠标悬停在特定部分时，我想将图像更改为该特定图像 src 值。

如果没有悬停任何 div，则应显示默认的直 View 像。

我已经实现了，但是图像应该随着动画而改变。我的动画闪烁。

有人能指出我正确的方向吗？

$('#thumbs img').hover(function(event) {

  $(this).fadeOut(100, function() {
    var thisSRC = $(this).attr('src');
    $('#main').attr('src', thisSRC);
  }).fadeIn(100);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbs">
  <img src="https://i.ibb.co/rxX8VMq/left.png" width="50" height="50">
  <img src="https://i.ibb.co/r77CrCC/topleft.png" width="50" height="50">
  <img src="https://i.ibb.co/CzRdRtp/top.png" width="50" height="50">
  <img src="https://i.ibb.co/L8cSs3p/topright.png" width="50" height="50">
  <img src="https://i.ibb.co/D1cjqfD/right.png" width="50" height="50">
</div>

<img id="main" src="https://i.ibb.co/3dMWhqV/default-head.png">

jsfiddle

Answer 1

鉴于您已经使用全尺寸图像，则可以使用纯 CSS 解决方案，因为加载大图片不需要额外的带宽:

仅 CSS:

.thumb{ 
  width: 50px; 
  display: inline-block;
}

.thumb:hover  ~ .big .default{ opacity:0; }


.thumb:nth-child(1):hover ~ .big > img:nth-child(1){ z-index:5; opacity:1; }
.thumb:nth-child(2):hover ~ .big > img:nth-child(2){ z-index:5; opacity:1; }
.thumb:nth-child(3):hover ~ .big > img:nth-child(3){ z-index:5; opacity:1; }
.thumb:nth-child(4):hover ~ .big > img:nth-child(4){ z-index:5; opacity:1; }
.thumb:nth-child(5):hover ~ .big > img:nth-child(5){ z-index:5; opacity:1; }

.big{ position:relative; } 
.big img{ 
  position:absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .2s .1s ease-out;
}

.big .default{ opacity:1; }

<img src="https://i.ibb.co/rxX8VMq/left.png" class='thumb'>
<img src="https://i.ibb.co/r77CrCC/topleft.png" class='thumb'>
<img src="https://i.ibb.co/CzRdRtp/top.png" class='thumb'>
<img src="https://i.ibb.co/L8cSs3p/topright.png" class='thumb'>
<img src="https://i.ibb.co/D1cjqfD/right.png" class='thumb'>

<div class='big'>
  <img src="https://i.ibb.co/rxX8VMq/left.png">
  <img src="https://i.ibb.co/r77CrCC/topleft.png">
  <img src="https://i.ibb.co/CzRdRtp/top.png" class='default'>
  <img src="https://i.ibb.co/L8cSs3p/topright.png">
  <img src="https://i.ibb.co/D1cjqfD/right.png">
</div>

使用预处理器(如 SCSS)生成上述 CSS 变得容易容易