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

Mario A · Accepted Answer · 2015-01-19 12:34:19Z

2

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

answered Jan 19, 2015 at 12:34

Mario A

3,3711 gold badge20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Huw Rowlands Over a year ago

This causes a 'jump' if I move my mouse away during animation. Anyway to fix that?

Mario A Over a year ago

this is because auf the class slideRight , I made some adjustments here codepen.io/anon/pen/OPmRGL

Huw Rowlands Over a year ago

Still jumps I'm afraid?

Mario A Over a year ago

My fault, I hadn't saved it.

Huw Rowlands Over a year ago

Looking good. Thank you. One more thing: if I were to hover my pointer over and then quickly move it from the logo; the logo snaps back instead of continuing with the animation. Is there a way to make sure it completes the animation? Thank you for your help.

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 19, 2015 at 12:34

juan.facorro

9,9602 gold badges36 silver badges41 bronze badges

2 Comments

Huw Rowlands Over a year ago

Almost there! Maybe it's the way I have worded my question above but I can see in your demo that once the logo has been hovered over, it keeps moving. I guess that what the 'infinite' in the css does? Is there a way to have this move, only on hover. So it animates once on hover, then if hovered over again, it animates again. Thanks for your help

juan.facorro Over a year ago

I think I understand now, please check the approach above using jQuery.

bostero2 · Accepted Answer · 2015-01-20 11:49:55Z

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.

I just noticed a bug on my code when you let the animation finish and move the mouse out the animation fires again, the way to solve it is by adding another jQuery function as follows: jQuery( ".site-logo" ).on('mouseout', function(){ jQuery( this ).removeClass( "slideRightLeft" ); }); I've added it to the code pen above.

theRev · Accepted Answer · 2015-01-19 12:40:19Z

0

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

answered Jan 19, 2015 at 12:40

theRev

1091 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery .hover doesn't loop

4 Answers 4

6 Comments

Edit

2 Comments

EDIT

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Edit

2 Comments

EDIT

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related