javascript - 我试图破坏一个 JavaScript 函数

Question

我编写了一个小脚本来制作一个小动画，但是当我在 div 上快速移动光标 10 次时，div 移动了 10 次。我创建了一个全局变量和一个 if 查询，但它不起作用。

代码:

var working = false;
$(document).ready(function () {
    $("#div1").attr("style", "position:absolute;top:0px;left:0px;");
    $("#div2").attr("style", "position:absolute;top:0px;right:0px;");
    $("#div3").attr("style", "position:absolute;bottom:0px;left:0px;");
    $("#div4").attr("style", "position:absolute;bottom:0px;right:0px;");
});

function animon(id) {
    if (working == true) return false;
    var working = true;
    if (id == "1") $("#div1").animate({
        position: 'absolute',
        top: '0px',
        left: '60px'
    }, "slow");
    if (id == "2") $("#div2").animate({
        position: 'absolute',
        top: '0px',
        right: '60px'
    }, "slow");
    if (id == "3") $("#div3").animate({
        position: 'absolute',
        bottom: '0px',
        left: '60px'
    }, "slow");
    if (id == "4") $("#div4").animate({
        position: 'absolute',
        bottom: '0px',
        right: '60px'
    }, "slow");
}

function animoff(id) {
    if (id == "1") $("#div1").animate({
        position: 'absolute',
        top: '0px',
        left: '0px'
    }, "slow");
    if (id == "2") $("#div2").animate({
        position: 'absolute',
        top: '0px',
        right: '0px'
    }, "slow");
    if (id == "3") $("#div3").animate({
        position: 'absolute',
        bottom: '0px',
        left: '0px'
    }, "slow");
    if (id == "4") $("#div4").animate({
        position: 'absolute',
        bottom: '0px',
        right: '0px'
    }, "slow");
    var working = false;
}

animon() 函数以 onmouseover 事件为界，而 animoff() 函数以 onmouseout 事件为界。工作 bool 值会检查是否移动了 div 容器。

Answer 1

您想使用 .stop() .

$(document).ready(function(){
    $("#div1").attr("style", "position:absolute;top:0px;left:0px;");
    $("#div2").attr("style", "position:absolute;top:0px;right:0px;");
    $("#div3").attr("style", "position:absolute;bottom:0px;left:0px;");
    $("#div4").attr("style", "position:absolute;bottom:0px;right:0px;");
});
function animon(id){
    if(id=="1")
        $("#div1").stop(true).animate({position:'absolute',top:'0px',left:'60px'},"slow");
    if(id=="2")
        $("#div2").stop(true).animate({position:'absolute',top:'0px',right:'60px'},"slow");
    if(id=="3")
        $("#div3").stop(true).animate({position:'absolute',bottom:'0px',left:'60px'},"slow");
    if(id=="4")
        $("#div4").stop(true).animate({position:'absolute',bottom:'0px',right:'60px'},"slow");
}
function animoff(id){
    if(id=="1")
        $("#div1").stop(true).animate({position:'absolute',top:'0px',left:'0px'},"slow");
    if(id=="2")
        $("#div2").stop(true).animate({position:'absolute',top:'0px',right:'0px'},"slow");
    if(id=="3")
        $("#div3").stop(true).animate({position:'absolute',bottom:'0px',left:'0px'},"slow");
    if(id=="4")
        $("#div4").stop(true).animate({position:'absolute',bottom:'0px',right:'0px'},"slow");
}