jQuery Hover Animation Effect Without stop() Call

Likely you skilled a few flashing effect the primary time you tried to make a jQuery hover animation with out the forestall() name. This takes place while you hover and take your mouse away speedy without looking ahead to the animation to finish. This conduct triggers a new animation to begin before the previous has completed.
In this article I’m going to present the proper manner of creating jQuery animation calling the stop() method, heading off shaking fuzzy consequences.

See the first demo wherein the animation is well appliedattempt to shake your mouse and the panels won’t pass loopy. try the second one demo in which I eliminated the forestall() methodmove your mouse quickly above the button a pair instances and the animation won’t stop whilst you leave the button alone.

The HTML code has a button and a couple of panels that we’ll animate

<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>
<div class="tab">Second Panel</div>

The CSS code adds background colors and sets the uncovered state.

#demo {
    padding: 5px 20px;
    font-size: 17px;
    text-align: center;
    background-color: #555;
    color: white;
    border: solid 1px #666;
    border-radius: 3px;
    cursor: pointer;
}
#demo.hovered {
    background-color: #000;
}
.tab {
    margin-top: 10px;
    padding: 50px;
    opacity: 0.5;
    background-color: #876;
}

In the jQuery code, we are listening to mouseleave and mouseover events on the button. The events trigger the animations which have callback functions that add a class to the button.

$(document).ready(function () {
    $('#demo').mouseleave(function(event) {
        $('.tab').stop().animate({
            opacity : '0.5',
            marginTop: '10px'
        }, 500, function() {        //animation complete
            $('#demo').removeClass('hovered');
        });
    });
    $('#demo').mouseover(function(event) {
        $('.tab').stop().animate({
            opacity : '1',
            marginTop: '0px'
        }, 300, function() {        //animation complete
            $('#demo').addClass('hovered');
        });
    });
});

 

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *