我试图在将鼠标悬停在页面中的不同元素上时为图像交换设置动画。我目前正在使用 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');
}
});
});
});
这在大多数情况下都有效，直到您在上一个动画完成之前将鼠标悬停在一个新元素上……这会破坏它。任何帮助将不胜感激!
最佳答案
所以这主要可以用 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>
这是一个 fiddle :https://jsfiddle.net/s1q6L9vc/2/
关于jquery - 如何在悬停时动画图像交换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34598473/