如何在悬停时动画图像交换答案

【问题标题】：How to animate image swap on hover如何在悬停时动画图像交换
【发布时间】：2016-04-08 11:57:00
【问题描述】：

当我将鼠标悬停在页面中的不同元素上时，我正在尝试为图像交换设置动画。我目前正在使用 GSAP，但如果可能的话，我会接受使用 jQuery 或仅使用 CSS 的更简单的解决方案。

鉴于我为此编写了多少代码，我已经知道我走错了路。必须有一个更简单的解决方案（而这个甚至不起作用，所以也有）。

这是我到目前为止所做的，因此您可以了解我要完成的工作：

这是 javascript/gsap 代码：

$(document).ready(function() {
  var image1 = document.querySelector('#image1');
  var image2 = document.querySelector('#image2');
  var image3 = document.querySelector('#image3');
  var activeImage = document.querySelector('.image-container .active');

  $('.item1').hover(function() {
    TweenMax.to(image1, 0.5, {
      left: 0
    });

    TweenMax.to(activeImage, 0.5, {
      left: 1500,
      onComplete: function() {
         $('.image').removeClass('active');
         $('#image1').addClass('active');

         activeImage = document.querySelector('.image-container .active');
      }
    });
  });


  $('.item2').hover(function() {
    TweenMax.to(image2, 0.5, {
    left: 0
  });

    TweenMax.to(activeImage, 0.5, {
      left: 1500,
      onComplete: function() {
        $('.image').removeClass('active');
        $('#image2').addClass('active');

        activeImage = document.querySelector('.image-container .active');
      }  
    });
  });


  $('.item3').hover(function() {
    TweenMax.to(image3, 0.5, {
      left: 0
    });

    TweenMax.to(activeImage, 0.5, {
      left: 1500,
      onComplete: function() {
        $('.image').removeClass('active');
        $('#image3').addClass('active');

        activeImage = document.querySelector('.image-container .active');
      }
    });
  });
});

这在大多数情况下都有效，直到您在前一个动画完成之前将鼠标悬停在一个新元素上......这会破坏它。任何帮助将不胜感激！

【问题讨论】：

标签： jquery css animation gsap

【解决方案1】：

所以这可以通过大部分 css 和一些 jquery 来完成，这里是 css 代码：

html,body{
width:100%;
height:100%;
overflow:hidden;


 }
  .box {
    display:inline-block;
    height: 100px;
    width: 100px;
    margin: 10px;
    border: 1px solid black;

  }
  .image{
    width:100px;
    height:100px;
    position:absolute;
    left:2500px;
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
  }
  .image.active{
    left:0px;
  }
  .box:hover{
    background:blue;
  }

和 jquery（我认为有更简单的解决方案，但这是我首先想到的）：

$('.box').hover(function(){
    id = $(this).attr('id');
    if(id === "1"){
        $('#im1').addClass('active');
        $('#im2').removeClass('active');
        $('#im3').removeClass('active');
    }else if(id === "2"){
        $('#im1').removeClass('active');
        $('#im2').addClass('active');
        $('#im3').removeClass('active');
    }else if(id === "3"){
        $('#im1').removeClass('active');
        $('#im2').removeClass('active');
        $('#im3').addClass('active');
    }
})

我改变了你的 html ：

<body>
 <div class="container">
  <div id="1" class="box">
    Item 1
  </div>

  <div id="2" class="box">
    Item 2
  </div>

  <div id="3" class="box">
    Item 3
  </div>
 </div>
<div class="image-container">

   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" id="im1" class="image active">
   <img src="http://1.bp.blogspot.com/-n4re1AOb5x0/U-WP0ppwr5I/AAAAAAAALhY/QgFS0Bmp6Ug/s1600/cute-wink-smiley.png" id="im2" class="image">
   <img src="https://s-media-cache-ak0.pinimg.com/736x/4e/5c/f7/4e5cf7d4ccb9c59b6620a9c71944d51e.jpg" id="im3" class="image">
 </div>
</body>

这是一个小提琴：https://jsfiddle.net/s1q6L9vc/2/

【讨论】：