CODEWITHSUNDEEP
javascriptjquery
goregrind
goregrind

Reputation: 49

I want my jQuery animation to work only once

I want this to work only once. For now, my scroll top always work and so it's impossible to scroll down my page.

$(function() {
    $(".showhover").hover(
    function() {
        $('div.mouseover').show(),
        $("html, body").animate({scrollTop: $('div.mouseover').innerHeight() });
    });
});

Upvotes: 1

Views: 107

Answers (2)

PSL
PSL

Reputation: 123739

Try one('mouseenter mouseleave', hover is a pseudo event for the combination of mouseenter and mouseleave.

$(".showhover").one('mouseenter mouseleave', function(e) {
        $('div.mouseover').toggle();
        if(e.type === 'mouseenter')
            $("html, body").animate({scrollTop: $('div.mouseover').innerHeight() });
});

Upvotes: 0

adeneo
adeneo

Reputation: 318362

You could use one(), but hover() is a custom function in jQuery packaging mouseenter and mouseleave together, and doing one('hover') would attach to the hover event, which is not recommended.

When using mouseenter / mouseleave you have to revert the functionality yourself :

$(function() {
    $(".showhover").one({
        mouseenter: function() {
            $('div.mouseover').show(),
            $("html, body").animate({scrollTop: $('div.mouseover').innerHeight() });
        },
        mouseleave: function() {
            $('div.mouseover').hide(),
        }
    });
});

Upvotes: 3

Related Questions