如何让div在悬停时上下移动?Mouseover和Mouseout冲突



我正在尝试使用setInterval运行动画,它运行得很好。尽管我试图让动画一直运行,然后在鼠标离开后停止。

我可以让div上下移动,但如果你把鼠标移得太快,它就会陷入一个加减像素的循环中。或者其他时候,它会完全停止移动,并卡在底部的顶部。

你可以在这里看到问题,将鼠标快速移入和移出小框几次。https://jsfiddle.net/L16fdbrj/1/

这是我的Javascript:

    var blog_folder_index = false;
    var blog_folder_pos = 0;
    var blog_folder_interval;
    var framespeed = 5;
    function blog_folder_mouseover()
        {
            if (blog_folder_index == false)
                {
                    document.getElementById("blog_folder_button").style.cursor = "pointer";
                blog_folder_interval = setInterval(function (){ blog_folder_add();}, 35);   
                }
        }
    function blog_folder_mouseout()
        {
            blog_folder_interval = setInterval(function (){ blog_folder_subtract();}, 50);
            console.log("mouseout");        
        }
    function blog_folder_add()
        {
            if (blog_folder_pos <= -30)
                {
                    console.log(blog_folder_pos);
                    stop_function();
                }
            else if (blog_folder_pos > -30)
                {
                    blog_folder_pos -= framespeed; 
                    document.getElementById("blog_folder").style.marginTop = blog_folder_pos + 'px '; 
                }
        }
    function blog_folder_subtract()
        {
            if (blog_folder_pos >= 0)
                {
                    console.log(blog_folder_pos);
                    stop_function();
                }
            else if (blog_folder_pos < 0)
                {
                    blog_folder_pos += framespeed; 
                    document.getElementById("blog_folder").style.marginTop = blog_folder_pos + 'px '; 
                }
        }   
    function blog_folder_click()
        {
            blog_folder_index = true;
            portfolio_folder_index = false;
            about_folder_index = false;
            document.getElementById("blog_folder_button").style.cursor = "default";
            document.getElementById("portfolio_folder").style.zIndex = "2";
            document.getElementById("blog_folder").style.zIndex = "3";
            document.getElementById("about_folder").style.zIndex = "1";

            blog_folder_interval = setInterval(function (){ blog_folder_subtract();}, 35);
        }
    function stop_function()
        {
            clearInterval(blog_folder_interval);
        }

您只需要在创建新的间隔之前清除以前的间隔:

https://jsfiddle.net/L16fdbrj/2/

function blog_folder_mouseover() {
    if (blog_folder_index == false) {
        document.getElementById("blog_folder_button").style.cursor = "pointer";
        // clear previous interval
        stop_function();
        blog_folder_interval = setInterval(function () {
            blog_folder_add();
        }, 35);
    }
}
function blog_folder_mouseout() {
    // clear previous interval
    stop_function();
    blog_folder_interval = setInterval(function () {
        blog_folder_subtract();
    }, 50);
    console.log("mouseout");
}

最新更新