stop animation by click or hover at last frame

[Funkaholik]

hey guys .. can you help me out with this
how i can stop animation on last frame?
i mean how to let it play to the end and then stop
no matter on which step you hover it or click it?

thanx in advance

[Shikkediel]

I think you’ll need some JS for that…

codepen.io/anon/pen/oYqWVV

[Funkaholik]

Superb man .. )
so you just removing class anim and that’s it .. it plays to an end ha-ha
by the way it’s a typo there i guess in a second line JS
$(this).one(‘animationiteration
should be $(this).on(‘animationiteration

P.S. already on a new threat

[Shikkediel]

Cheers. No, that’s not a typo but a special JQ event listener where it is used once (hence the one) and then removed. Otherwise each time the mouse enters the item, it would add another handler and it would start firing multiple times. Nested events are tricky like that. If it were pure JS, I would’ve used an extra line to remove the event listener but jQuery’s handy with this.

http://api.jquery.com/one/

Link shows a 404 by the way…

[Shikkediel]

It’s not that necessary here by the way because the listener is also removed on mouseleave. But I only discovered later that that was needed because the class would otherwise always be removed once the image was entered, even if you leave it again before the event has fired. Can’t hurt to use one either though.

[Funkaholik]

well i have it here
i believe there is a way to change individual border length
ppl draw things with css

[Shikkediel]

You’re missing one letter there after .ani in the CSS. I don’t think changing/animating border length can be a border itself. Could be achieved with box-shadow or a pseudo element though.

[Author]

Posts