2

私はjquery1.3.2を使用しています。私は自分のウェブサイトに実装されているajaxカートに簡単なjqueryを書こうとしています。機能がありますajaxCartOpenCart()-カートブロックを開きます（単にそれを再表示します）とajaxCartCloseCart()。

カートに追加した後、カートブロックを再表示し、4秒間待機して、カートブロックを閉じるという単純なコードを追加しました。

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

問題：この4秒間の場合、次のような条件を作成する必要があります。マウスが入ったら#cart-block、閉じずにマウスが出るまで待ちます。それ以外の場合は4秒を数え、カートを閉じます。

助けてくれてありがとう。

4

3 に答える 3

3

タイムアウトをクリアしてから、マウスが離れたときに ajax 関数を呼び出すことができます。何かのようなもの：

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

$('element').hover(function () {
  clearTimeout(t);
}, function () {
  ajaxCartCloseCart();
});
于 2012-11-29T01:57:04.597 に答える
1

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-29T02:03:39.923 に答える
0

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-29T02:54:46.690 に答える