如何動畫圖像交換懸停

我試圖動畫的圖像交換時懸停在頁面中的不同元素。我目前正在使用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'); 
     } 
    }); 
    }); 
});

該作品大多數情況下，直到您在前一個動畫完成之前將鼠標懸停在新元素上之外......這會打破它。任何幫助將非常感激！

來源

2016-01-04 jonathan.a.katz

因此，這可以用大部分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/

來源

2016-01-04 20:44:46

謝謝！這似乎是完美的。 –

如何動畫圖像交換懸停

回答

相關問題