CODEWITHSUNDEEP
jqueryhtmlcssanimation
Brenton Thornicroft
Brenton Thornicroft

Reputation: 87

How to cease css animation before it starts when using jQuery .mouseover (it animates for a split second first and gets stuck in animated state)

I'm using wow.js, which is a lightweight parallax jQuery plugin. It animates elements as they come into view as you scroll down the page. It allows for attributes to add duration and delay to the animation, which works by adding this to the elements you include these attributes on (element must have class="wow" attribute also):

style="visibility: visible;-webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s;-webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s;"

I used class="wow animated fadeInDown" (with animate.css) to give it a fade in downward effect when it comes into view.

My issue is that I have a hover over effect on the element that I've applied this wow class to, which I also have CSS transition applied to for a smooth animation. The issue is that when I hover over the element, it shifts up and down as though it is re-doing the animation each time.

I've tried this, which works to cease the animation, but not until a split second after it starts, so it gets stuck in an awkward animated state:

$(function () {
    $('figure.special-deal').mouseover(function () {
        $(this).removeClass('fadeInDown animated wow');
    });
});

Here's the fiddle... the stop animation jquery code (.removeClass('fadeInDown animated wow')) doesn't seem to work though http://jsfiddle.net/DY6GM/

Are there other ways I can stop this from happening?

Upvotes: 1

Views: 1556

Answers (1)

yunzen
yunzen

Reputation: 33449

Yes, it's divide & conquer time :)

Create an inner div, which only acts on hover and a outer div, that only acts on wow

You can see in this fiddle

HTML

<div class="special-deal wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".3s" style="visibility: visible;-webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s;-webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s;">
    <div class="inner animated">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div>
</div>

CSS

.special-deal .inner:hover {
   /* visibility: visible;*/
    opacity: .5;
}

Upvotes: 2

Related Questions