如果懸停然後等待，否則繼續

我使用jquery 1.3.2。我嘗試寫簡單的jQuery到我的網站上實現的ajax手推車。有功能ajaxCartOpenCart() - 打開購物車塊（只是取消隱藏它）和ajaxCartCloseCart()。如果懸停然後等待，否則繼續

我添加了簡單的代碼，添加到購物車後，取消隱藏購物車塊，等待4秒鐘，並關閉購物車塊。

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

問題：我需要創建一個條件 - 如果在這段時間內4秒。鼠標輸入#cart-block，然後不要關閉它並等待鼠標離開。否則計數4秒並關閉購物車。

非常感謝您的幫助。

來源

2012-11-29 user1031742

您可以清除超時，然後在鼠標離開時調用ajax函數。喜歡的東西：

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

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

來源

2012-11-29 01:57:04 Ivan

你好，這段代碼有效。是否可以使用.live作爲'元素'？它由ajax重新創建並打破jQuery – user1031742

當您創建元素時，您會希望附加懸停事件。另外，'live'函數現在已被棄用。 – Ivan

我創建類似這樣使用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); 
    }); 

});

來源

2012-11-29 02:03:39 frictionlesspulley

您可以使用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>

來源

2012-11-29 02:54:46 Teddy

如果懸停然後等待，否則繼續

回答

相關問題