Question

我正在构建一个具有浮动（固定位置）篮子的网站（使用jQuery 1.4）。

当前正常工作功能（ Demo here ）：

当用户点击篮子本身时，它会切换幻灯片打开/关闭并切换“锁定”类
当用户点击页面中的“添加项目”链接时，它会滑动打开，添加一个“on”类，并淡化一条说明已添加“项目名称”的通知

我正在努力的事情

如果用户点击了“添加项目”链接：3秒后通知会淡出，篮子滑动关闭，并且“on”类将被删除。但是这需要考虑用户是否疯狂地快速点击了10件事情;更新添加的曲目名称通知文本而不排队一堆淡化/幻灯片 - 而只是保持良好的打开状态，然后从最后添加的项目滑动关闭3秒。并且如果篮子的类被“锁定”（即;已由用户打开），那么只有通知应该淡出，篮子应该保持打开状态。

到目前为止

javascript

//Toggle basket directly
$("#basket-button").click(function(){
    $("#basket-contents").slideToggle();
    $("#floating-basket").toggleClass("locked on");
    return false
});
//Toggle basket with a 'buy now' button
$(".buy-button").click(function(){
    //open basket 
    $("#basket-contents").slideDown();
    $("#floating-basket").addClass("on");
    //set track name
    $("#basket-trackname").text($(this).attr('name'));
    //Display basket message
    $("#basket-message").fadeIn();
    return false
});

HTML

<a class="buy-button" name="Item Name one" href="#">Buy</a>
<a class="buy-button" name="Item Name two" href="#">Buy</a>

<div id="floating-basket">
    <div id="basket-message">
        <strong id="basket-trackname"></strong> added to basket!
    </div>
    <a href="/basket" id="basket-button">My Basket <span id="basket-number">0</span></a>
    <div id="basket-contents">
        lorem
        <a href="#">Checkout</a>
    </div>
</div>

http://www.webresourcesdepot.com/ajaxed-sliding-shopping-cart-with-jquery是我发现的最接近的东西 - 但即使这样也有问题（例如，如果你添加一个项目并快速关闭篮子）。

非常感谢一些意见：）

Answer 1

了解setTimeout和clearTimeout

var t = setTimeout(function(){ whattodo(); }, 3000);

会做匿名函数，它基本上只包含whattodo()函数（可以隐藏篮子等）。

然后在每次点击，.stop()动画并致电：

clearTimeout(t); // clears previous timeout
t = setTimeout(function(){ whattodo(); }, 3000); //set new timeout

所以，setTimeout / clearTimeout将在3秒内隐藏时间，而.stop()会停止正在进行的动画 - 了解更多@ http://api.jquery.com/stop/ - 基本用法：

$(myelementwithanimation).stop()

以及有关超时的更多信息：http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Answer 2

我认为你在寻找.stop（）

http://api.jquery.com/stop/

Answer 3

这是您需要的想法：

free=true;
function doSomeAnimation(){
//do what is done either way
if(free){
free=false;
$(something).addClass('foo').slideDown(function(){free=true;});
}
}

而不是取消动画 - 如果它们已在运行

，则不要触发它们

PS。超时是可以的，但你必须保持所有处理程序能够清除超时，所以它变得丑陋......;）

处理jQuery中的快速点击

3 个答案: