jQuery .hover doesn't loop

Question

I have a codepen here: http://codepen.io/huwrowlands/pen/GgmjqX

HTML:

<div class="site-branding">
  <a href="#">
    <img alt="Land" class="site-logo site-logo-land" src="http://website-test-lab.com/sites/landchain/wp-content/themes/landchain/assets/img/land.png" />
  </a>
</div>

CSS:

/* Basic Styles */
.site-logo {        
    visibility: hidden;
    max-width: 127px;
    margin: 0 auto;
    display: block;
}



/* Animation CSS */
.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }           
    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}
/**/
.slideRightLeft{
    animation-name: slideRightLeft;
    -webkit-animation-name: slideRightLeft; 

    animation-duration: 1s ;    
    -webkit-animation-duration: 1s;

  animation-iteration-count: infinite;
  -webkit-iteration-count: infinite;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideRightLeft {
    0% {
        transform: translateX(0%);
    }       
  50% {
    transform: translate(-50%);
  }
    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideRightLeft {
    0% {
        -webkit-transform: translateX(0%);
    }
  50% {
    transform: translate(-50%);
  }     
    100% {
        -webkit-transform: translateX(0%);
    }
}

JS:

//Animations (Delay)
        jQuery(function(){
            setTimeout(function(){
                jQuery('.site-logo-land').addClass("slideRight");
            }, 1000);
        });


jQuery( ".site-logo" ).hover(function() {
  jQuery( this ).addClass( "slideRightLeft" );
});

On page load, the Land logo animates in by adding a class which is controlled by CSS keyframe animations. I also have a jQuery snippet to add another class to animate he Land logo on hover.

What I require, is that the hover effect to work each time a user hovers over the Land logo. Currently, it only does this once.

Not sure, if this is something to do with my CSS keyframes animation code, or something I need to fix with my jQuery.

Thanks in advance

Answer 1

I'm writing an answer since I cannot comment cause of my low rep (I need at least 50 to do so). But taking the suggestions from Mario A I resolved the issue of the jump on mouseout.

First of all I made some work on your css. I added a transition: 1s transform to the site-logo class, then I removed the keyframe animation for the .slideRightLeft class and added a simple transform: translate(-50%) since with I wasn't able to make the transition work with the keyframe animation. With these changes the text was sliding to the right on hover and if you took off your mouse at any point it would slide back into the original position, but if you left your mouse over the image it would remain at the -50% position until you took your mouse off. Here are the relevant CSS classes:

.site-logo {        
    max-width: 127px;
    margin: 0 auto;
    display: block;
  transition: 1s transform;
  -webkit-transition: 1s -webkit-transform;
}
.slideRightLeft{
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
}

To resolve that I added a new setTimeout of 1s to your JS and have it remove the slideRightLeftclass, this way if you leave your mouse over the image it would return to the original position within 1s. Also having seen what Mario A had done with the JS I thought it would be simpler to have it all on the .hover function, hence I change the addClass to toggleClass and added the removeClass for the slideRight class on the hover function. Here's the updated JS:

//Animations (Delay)
        jQuery(function(){
            setTimeout(function(){
                jQuery('.site-logo-land').addClass("slideRight");
            }, 1000);
        });

jQuery( ".site-logo" ).hover(function() {
  var curObj = this;
  jQuery( this ).toggleClass( "slideRightLeft" );
  setTimeout(function(){
    jQuery( curObj ).removeClass( "slideRightLeft" );
  }, 1000);
  jQuery( this ).removeClass( "slideRight" );
});

You can check it out here: http://codepen.io/anon/pen/PwmJRN

Hope I could help!

EDIT

After publishing this I found a bug on the code where if you leave the mouse until the animation finishes and then move it out the animation fires up again, to resolve this I added the following to the JS:

jQuery( ".site-logo" ).on('mouseout', function(){
  jQuery( this ).removeClass( "slideRightLeft" );
});

This solves that issue and everything else working as before.

Answer 2

You should add the following to the .slideRightLeft class:

-webkit-animation: slideRightLeft 1.3s infinite;
animation: slideRightLeft 1.3s infinite;

Check this link for a working demo.

---

Edit

You can find the implementation using jQuery's animate() function here. Note the added style to the img.

JS

jQuery( ".site-logo" ).hover(function() {
  jQuery( this ).animate({
    left: "-=50"
  }, 1000)
  .animate({
    left: "+=50"
  }, 1000);
});

Answer 3

Why not use css:hover selector. You can do something like this:

.site-logo:hover
{
  animation-name: slideRightLeft;
  -webkit-animation-name: slideRightLeft; 
  animation-duration: 1s ;    
  -webkit-animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-iteration-count: infinite;
  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;     
  visibility: visible !important;
}

Answer 4

jQuery hover function doesn't work like the css :hover class where styles are just applied on hover, and removed after mouseout. You need to remove the class on mouseout again:

jQuery( ".site-logo" ).on('mouseout', function() {
  jQuery( this ).removeClass( "slideRightLeft" );
});