2

我只是从一般的 jQuery 和 Web 开发开始，所以，请原谅任何幼稚的错误。我试图有一个按钮，导致动画发生。也就是说，这个动画只是简单地从左到右移动一个“h2”标题，然后再回来（并简单地改变颜色）。

我在使用以下代码时遇到的问题是，如果用户多次单击该按钮，则会导致该按钮继续通过转折点。我了解到这是一个异步问题，并尝试在动画调用中使用回调函数来重新启用按钮功能。

如您所见，我通过设置 queue:false 变量解决了这个问题。由于我还是新手，有没有更简单的方法可以做到这一点？

谢谢你的帮助！

var toTheRight = true;
$('#animation').click(function () {
    var header = $('h2')[0].style.left.toString();
    var headerNum;
    if (header.length < 5) {
        headerNum = 0;
    }
    else {
        headerNum = +(header.substring(0, header.length - 2));
    }
    if (headerNum >= 450) {
        toTheRight = false;
        $('h2').css("background-color", "green");
    }
    if (headerNum < 100) {
        toTheRight = true;
        $('h2').css("background-color", "orange");
    }
    var modified;
    var stringified;
    if (toTheRight) {
        modified = Math.round((headerNum + 100) / 100) * 100;
        strigified = modified + "px";
        $('h2').animate({
            "font-size": "3em",
            "width": "50%",
            "left": stringified
        }, { queue: false, duration: 1000 });
    }
    else {
        modified = Math.round((headerNum - 100) / 100) * 100;
        stringified = modified + "px";
        $('h2').animate({
            "font-size": "3em",
            "width": "50%",
            "left": stringified
        }, { queue: false, duration: 1000 });
    }
});
4

1 回答 1

5

您可以像这样将函数包装在 if 中：

$('#animation').click(function () {
    if(!$('h2').is(':animated')){
         //your function
    }
})

编辑：

正如烤所说，你可以这样做：

$('#animation').click(function () {
    if($('h2').is(':animated')) return;
    //your function
})
于 2013-06-05T20:35:07.790 回答