How to animate image swap on hover


Tags: jquery,css,animation,greensock,tweenmax

Problem :

I'm trying to animate an image swap when hovering on different elements in the page. I am using GSAP at the moment, but would be open to a simpler solution using jQuery or just CSS if possible.

I already know I'm on the wrong track given how much code I've written to accomplish this. There must be a simpler solution (and this one doesn't even work, so there's that too).

Here's what I have so far so you get an idea of what I'm trying to accomplish:

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

This is the javascript/gsap code:

$(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');
      }
    });
  });
});

This works for the most part, until you hover over a new element before the previous animation has finished...this breaks it. Any help would be much appreciated!



Solution :

So this can be done with mostly css, and a bit of jquery, here is css code:

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;
  }

and jquery ( i think there's simpler solution, but this is first i thought of):

$('.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');
    }
})

and i changed your html a bit :

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

here's a fiddle : https://jsfiddle.net/s1q6L9vc/2/


    CSS Howto..

    How to select any item preceded by some word in CSS

    how to align text input in Angular-Material tool bar?

    CSS: 2-column table, how to make one column as small as possible but no wrap and the other as big as possible?

    how to code different type of border in css?

    how to add space at top of page

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    jquery-ui icons not showing in production environment

    How can i get target with a hover an element under an element?

    How to edit a pseudo element on focus using css or jQuery

    How to show a div thats hidden by css on button click

    How do I change linked stylesheets?

    how to change the background color of first row in html table and all other rows alternate color

    Show different button on page load via Jquery

    How often is the default font size in the browser not 16px?

    How to have text slide in when I hover over navbar?

    How do I vertically align elements within a div in CSS?

    How to override Liferay core' css?

    How Can I Make An Odd Shaped Icon into a “Circle”?

    CSS help, how to target this link inside of div

    How to embed a font in website

    How to remove background from breadCrumb

    How to create CSS3 bounce effect

    How to prevent column break within an element?

    How Do I set this PHP printed HTML form to stay within

    tags?

    How to fix the css red notification bubble

    How to attach a CSS stylesheet to FXML?

    How to modify the font family within bootstrap

    How do I achieve this animation using javascript/jquery? [closed]

    How to make pagination's circle of slider using CSS only?

    How to use “two-toned” font variants in CSS?