Question

我使用jquery 1.3.2。我尝试将简单的jquery写入我网站上实现的ajax购物车。功能ajaxCartOpenCart() - 打开购物车区块（只是取消隐藏）和ajaxCartCloseCart()。

我添加了简单的代码，添加到购物车后，取消隐藏购物车块，等待4秒钟并关闭购物车块。

ajaxCartOpenCart();
setTimeout(function() {
  ajaxCartCloseCart()
}, 4000);

问题：我需要创建一个条件 - 如果在4秒这段时间内。鼠标进入#cart-block，然后不要关闭它，等待鼠标离开。否则计算4秒并关闭购物车。

非常感谢您的帮助。

Answer 1

您可以清除超时，然后在鼠标离开时调用ajax函数。类似的东西：

var t = setTimeout(function () {
   // ...
}, 4000);

$('element').hover(function () {
  clearTimeout(t);
}, function () {
  ajaxCartCloseCart();
});

Answer 2

我使用setInterval创建了与此类似的内容，以显示和隐藏顶栏

演示jsfiddle：http://jsfiddle.net/frictionless/QmLAv/

$(function() {

   var showTime = 5000;
   var transition = 'slow';
   var target = $('.headerbar');
   var flag = false;

    target.slideDown(transition);
    var id = setInterval(function(){hide(target);}, showTime);

    var hide = function(item) {
        debugger;
        if(flag){
            return;
        }
        clearInterval(id);
        item.slideUp(transition);
    };

    target.hover(function() {
        flag = true;
        clearInterval(id);
        $(this).show();
    }, function() {
        flag = false;
        id = setInterval(function(){hide(target);}, showTime);
    });

});

Answer 3

您可以使用css控制隐藏/显示购物车，如下所示。我认为这是最简单的方法，因为您不需要关心setTimeout和setInterval，这可能会导致意外结果。

<style type="text/css">
    .shopCart .shopCartDetail
    {
        border: 1px solid;
        width: 100px;
        display: none;
    }
    .shopCart:hover .shopCartDetail
    {
        display: block;
    }
</style>
<div class="shopCart">
    Shop Cart
    <div class="shopCartDetail">
        This is Shop Cart Detail</div>
</div>
<script type="text/javascript">
    $('.shopCart').hover(function () {
        //Ajax update content
    });
</script>

如果悬停然后等待，否则继续

3 个答案: