logo标签列表

如何在鼠标悬停时动画交换图片

jquerycssanimationgsap
4
我正在尝试在页面上不同元素悬停时动画交换图像。目前我正在使用GSAP，但如果可能的话，我也可以采用更简单的解决方案，如jQuery或仅CSS。
我已经知道我的方法是错误的，因为我写了很多代码来实现这个目标。必须有一个更简单的解决方案（而且这个方法甚至还不能正常工作）。
以下是我目前所拥有的内容，以便您了解我想要实现的目标：

http://codepen.io/jakatz/pen/GorLZb

这是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');
      }
    });
  });
});

这个大体上是有效的，但如果你在前一个动画结束之前悬停在一个新元素上，它就会出问题......这将破坏它。任何帮助都将不胜感激！

1个回答
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/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接