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 apply css for anchor tag inside table

    How to add a new rule to an existing CSS class

    How do i add a fading border to my nav bar CSS

    Jquery: show IMG on click

    how to Add sub menu to dropdown menu

    HTML code to show splitted data_frame in one html page using python

    How can I change the opacity of a certain text by clicking another div?

    How do you disable the set width of parent element for child element?

    How to have different transition durations for css and angular transition on same element?

    Box-shadow is overlapping other elements, how can I fix it?

    How to center text horizontally & vertically within dotted border

    Disable the centring image function in a slideshow plugin?

    How to set css class 'active' by using C#?

    How to avoid an unknown height sticky footer to overlap content with CSS only?

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    How to override external css marked as !important? [closed]

    How do I animate an entire table row in Angular without affecting the table row border?

    How can my website store strings locally? [closed]

    How do change the size of input box?

    How to scroll the fixed content in CSS and HTML

    How to create custom archive page on Tumblr

    how to make the osx-like border on css?

    How to add ellipsis to table cells with dynamic width with only CSS?

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    How to randomly pick colors and shapes from a for loop and display it in another div?

    How to dynamically create two rows of squares in html/css/javascript

    How to centre a div vertically and horizontallly?

    How to same element with unique XPath/CSS selector by both ID and Class?

    How to make a list float to the right in CSS?

    How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?