仅CSS：

Question

我想使用jQuery更改图片来源，但要添加动画。

我有一个默认的平直图片。我有5个不同的图像，头部朝不同的方向看。悬停在特定部分上后，我想将图像更改为该特定图像的src值。

如果没有div悬停，则应显示默认的平直图片。

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

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

$('#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 要容易得多

Answer 2

  $('#thumbs img').hover(function(event){
   $('#thumbs img').finish();    
        var thisSRC=$(this).attr('src');
        $('#main').fadeTo(500, 0.5);
        $('#main').finish();
        $('#main').fadeTo(500, 1).attr('src',thisSRC);        
  });

<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">

Answer 3

好吧，这是一个修改后的版本，可以为主要动画而不是任何缩略图动画。

悬停时，缩略图会得到active类
- 主图像淡出
- 主体已替换为缩略图的src
- 主体褪色了
悬停时，从缩略图中删除类active
- 开始300毫秒的超时
  - 如果300毫秒后没有缩略图处于活动状态，请将主图像恢复为默认图像

var $thumbnails = $('#thumbs img');
var $main = $('#main');

$main.data('originalSrc', $main.attr('src'));

$thumbnails.on('mouseenter', function(e){
  e.target.classList.add('active');
  
  $main.finish().fadeOut(500, function(){
    $main.attr('src', e.target.getAttribute('src'));
    $main.fadeIn(500);
  });
});

$thumbnails.on('mouseleave', function(e){
  e.target.classList.remove('active');
  
  setTimeout(function(){
    if ($thumbnails.filter('.active').length < 1) {
      $main.prop('src', $main.data('originalSrc'));
    }
  }, 200);
});

<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">

Answer 4

您应该首先fadeOut，完成后，更改源并在完成的回调中执行fadeIn。

$('#thumbs img').hover(function(event) {
  var thisSRC = $(this).attr('src');
  $('#main').fadeOut(300, function() {
    $('#main').attr('src', thisSRC);
    $('#main').fadeIn(300)
  });
});

<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">

如何在悬停时更改图像源？

4 个答案:

仅CSS：