Question

我在使代码工作时遇到了一些麻烦。我希望每1秒钟只移动一次图片。现在发生的是它继续前进我点击并继续动画的地方，我不希望这样。这是我的sercaint脚本：

$(bullet_place).ready(function() {
    $(".range").click(function(e) {

        $("#bullet_place").delay(50).fadeIn(0);
        var x = e.pageX - 27, 
            y = e.pageY - 22;
        $("#place").html("<style type=text/css> #bullet_place { position: fixed; > left: " + x + "; top:" + y + "; width: 50px; } </style>");
        $("#bullet_place").delay(750).fadeOut(500);
    })
});

Answer 1

首先，只有文档有一个就绪处理程序 其次，只有head部分应该包含样式标记（这在新的浏览器中即将更改）。

要限制点击次数，请使用on()和off()并暂停

$(document).ready(function() {
    $(".range").on('click', move);
});

function move(e) {

    $(".range").off('click');

    setTimeout(function() {
        $(".range").on('click', move);
    }, 1000);

    $("#bullet_place").delay(50)
                      .fadeIn(0)
                      .css({
                          position : 'fixed',
                          left     : e.pageX - 27,
                          top      : e.pageY - 22,
                          width    : '50px'
                      });

    $("#bullet_place").delay(750).fadeOut(500); // you're sure you shouldn't
}                                               // be using a callback ?

Answer 2

如果我说对了，点击之后你需要解除绑定或限制点击事件，并在动画完成后（在回调函数中）读取事件。这看起来像这样（UNTESTED！）：

    var clickEvent = true;
    $(".range").click(function (e) {
        if (clickEvent) {
            clickEvent = false;
            $("#bullet_place").delay(50).fadeIn(0);
            var x = e.pageX - 27,
                y = e.pageY - 22;
            $("#place").html("<style type=text/css> #bullet_place { position: fixed; > left: " + x + "; top:" + y + "; width: 50px; } </style>");
            $("#bullet_place").delay(750).fadeOut(500, function () {
                clickEvent = true;
            });
        }
    });

如何进行1次更改

2 个答案: