Using jquery to pause css animation not working

Question

I have a css animation that rotates an SVG. I am trying to pause the animation on hover using jquery. However, my attempt is not working can you please advise?

var menuText = $('.menuTexti'),
  rotate = $('.rotate'),
  playState = '-webkit-animation-play-state';

menuText.hover(function() {
  rotate.css(playState, function(i, v) {
    return v === 'paused' ? 'running' : 'paused';
  });
  rotate.addClass('paused', $(this).css(playState) === 'paused');
}, function() {
  rotate.removeClass('paused', $(this).css(playState) === 'paused');
});

.rotate {
  -webkit-animation: rotation 30s infinite linear;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 930 930" style="enable-background:new 0 0 930 930;" xml:space="preserve" id="menuText" class="menuText rotate">
        <g class="menuTexti">
                <path d="M752.7,180l-13.4-11.8l-31.4,35.6l-15.9-14l31.4-35.6l-13.4-11.8l13.9-15.8l42.7,37.6L752.7,180z"/>
        </g>
    </svg>

There's no overload for .addClass that takes a class name and a boolean. api.jquery.com/addclass Use the conditional operator like you did before, eg rotate.addClass($(this).css(playState) === 'paused' ? "paused" : "") — fdomn-m
– fdomn-m, Commented Dec 18, 2018 at 17:33

yaakov · Accepted Answer · 2018-12-18 17:54:55Z

If I'm not mistaken about what you're trying to do, this should work fine:

var 
menuText = $('.menuTexti'),
rotate = $('.rotate'),
playState = '-webkit-animation-play-state';

menuText.hover(function() {
  rotate.css(playState, 'paused');
}, function(){
  rotate.css(playState, 'running');
});

.rotate {
    -webkit-animation: rotation 30s infinite linear;
}

@-webkit-keyframes rotation {
from {
    -webkit-transform: rotate(0deg);
}
 to {
    -webkit-transform: rotate(359deg);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 930 930" style="enable-background:new 0 0 930 930;" xml:space="preserve" id="menuText" class="menuText rotate">
    <g class="menuTexti">
            <path d="M752.7,180l-13.4-11.8l-31.4,35.6l-15.9-14l31.4-35.6l-13.4-11.8l13.9-15.8l42.7,37.6L752.7,180z"/>
    </g>
</svg>

I assume you're trying to pause the animation on mouseover, and resume on mouseout.

Collectives™ on Stack Overflow

Using jquery to pause css animation not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related