jquery-避免双击

我有一个简单的动画问题是我想动画结束，然后我可以再次点击？jquery-避免双击

$(".next").click(function() { 

$('#result').animate({ 
    left: '-=250', 
    }, 1000, function() { 
    pos = $('#result').position(); 

    if (pos.left <= -550) { 
$('.next').hide(); 
    } 
    if (pos.left <= -250) { 
    $('.prev').show(); 
    } 
});

来源

2012-03-22 LeBlaireau

你有小提琴可以分享吗？ – Sethen 2012-03-22 16:09:58

答案很简单，使用.data()方法来设置项目上的可点击标志。您可以在完整的功能中重新启用它。

从jQuery.com：.data() Documentation

的。数据（）方法允许我们附上的任何类型的数据，以DOM元素中的方式，是从循环引用安全并因此从存储器泄漏。

我们可以为一个单一的元素设置多个不同的值，并在以后检索它们：

在你的动画使用完整方法（您已经使用显示/隐藏你的下一个/上一个按钮，我们可以重新启用被点击的按钮。我们存储$(this)到btn所以它可以从完整功能关闭访问

注意。

$(".next").click(function() { 
    var btn = $(this); 
    if (btn.data('running')) 
    return; 

    btn.data('running', true); 

    $('#result').animate({ 
    left: '-=250', 
    }, 1000, function() { 
     pos = $('#result').position(); 

     if (pos.left <= -550) { 
     $('.next').hide(); 
     } 
     if (pos.left <= -250) { 
     $('.prev').show(); 
     } 

     // Unset it here, this lets the button be clickable again 
     btn.data('running', false); 
    } 
    ); 
});

来源

2012-03-22 16:10:36 Aren

不.data仅适用于HTML 5吗？ – 2012-03-22 16:12:45

'.data'与'data-item =“asd”'属性不同。自从jQuery 1.3开始，它存储了引用包含该dom的jQuery对象的数据。从jQuery 1.4.3开始，.data（）会被'data-attributes'自动填充，但在HTML5之前完全支持'.data（）'。它只是在内存中存储一个JavaScript对象。 – Aren 2012-03-22 16:14:37

不错！不知道，谢谢！ – 2012-03-22 16:16:52

禁用单击按钮，并使用“SetTimeout”功能在相同的时间段后启用它。

$(".next").click(function() { 

    $(this).enabled = false; 
    setTimeout('enableButtons()', 250);  } 

    $('#result').animate({ 
     left: '-=250', 
    }, 1000, function() { 
    pos = $('#result').position(); 

    if (pos.left <= -550) { 
$('.next').hide(); 
    } 
    if (pos.left <= -250) { 
    $('.prev').show(); 
    } 
}); 

function enableButtons() { 
    $(".next").enabled = true; 
}

来源

2012-03-22 16:09:20

你可以让这个动画的animate开始前自动完成再次：

$('#result').stop(true, true).animate({ ...

来源

2012-03-22 16:11:08 Neal

这是我认为会起作用的方法，但它没有 – LeBlaireau 2012-03-22 16:34:47

禁用点击按钮，使用.animate功能的完整的函数调用来重新启用它：

.animate（属性[，持续时间] [，缓和] [，完整]）

完整动画完成后调用的函数。

来源

2012-03-22 16:12:21 RTulley

jquery-避免双击

回答

相关问题