我希望我的jQuery动画只能工作一次

Question

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() });
    });
}); 

Answer 1

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(),
        }
    });
}); 

Answer 2

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() });
});