Question

我试图用光标下的一个小动画绑定“body”上的每次点击： http://jsfiddle.net/Nippon/pARR3/

var timeoutHandle = setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);

$('html').click(function(e){
    e.preventDefault();
      $(".click").addClass("clickOn");
      clearTimeout(timeoutHandle);
      setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);
    });

问题是我不知道如何addClass并在同一次点击中删除它。现在我正在使用setTimeout，它适用于慢速点击而没有双击。当你像疯子一样开始点击时，动画会变得很糟糕。

有人可以帮我清理我制作的这个烂摊子并使其平滑/双击吗？

Answer 1

我采取了略微不同的方法。我为每次点击创建了一个新元素。这有两个选择：

http://jsfiddle.net/kxJkK/

$(document).bind('mousemove', function (e) {
    $('#clickWrapper').css({
        left: e.pageX - 20,
        top: e.pageY - 20
    });
});

$('html').click(function (e) {
    e.preventDefault();
    var $div = $('<div class="click"></div>')
        .appendTo('#clickWrapper')
        .addClass('clickOn');

    setTimeout(function () {
        $div.remove();
    }, 1000);
});

http://jsfiddle.net/KTdN7/

var left;
var top;

$(document).bind('mousemove', function (e) {
    left = e.pageX - 20,
    top = e.pageY - 20
});

$('html').click(function (e) {
    e.preventDefault();
    var $div = $('<div class="click"></div>')
        .css({ top: top, left:left})
        .appendTo('#clickWrapper')
        .addClass('clickOn');

    setTimeout(function () {
        $div.remove();
    }, 1000);
});

Answer 2

var timeoutHandle = setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);

$('html').click(function(e){
e.preventDefault();
  $(".click").addClass("clickOn").delay(1000).removeClass("clickOn");
  clearTimeout(timeoutHandle);
  setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);
});

那应该有用。 ç

Answer 3

要防止双击，您只需暂时删除处理程序即可。如果您稍后决定暂时停止观看鼠标移动，则可以使用相同的技术。但是，这里需要setTimeout。您可以直接使用，也可以是内部库。

$(document).bind('mousemove', function (e) {
    $('#clickWrapper').css({
        left: e.pageX - 20,
        top: e.pageY - 20
    });
});

function toggleBubble(state) {
    if (state) {
        $(".click").addClass("clickOn");
        $('html').off('click', showBubble);
        console.log("add");
    } else {
        $(".click").removeClass("clickOn");
        $('html').on('click', showBubble);
        console.log("rm");
    }
}

function showBubble(e) {    
    toggleBubble(true);
    setTimeout(toggleBubble.bind(null, false), 1000);

    return false;
}

$('html').on('click', showBubble);

如何在jQuery中没有setTimeout清除类

3 个答案:

updated fiddle