jquery - 在使用 jquery 的函数中使用 setTimeout()

Question

嗨，朋友们需要您的帮助，我正在尝试为购物车开发 UI。当用户单击购买按钮时，我需要显示购物车购物车将显示两秒钟然后隐藏。现在的问题是，如果用户将鼠标悬停在打开的购物车上，一旦用户将鼠标从购物车中移出进行基本演示，它就会保持打开状态，您可以转到此链接http://jsfiddle.net/uVdb3/5/或者您可以在下面查看我的代码

html

<table width="100%">
  <tr>
    <td width="51%" align="left" valign="bottom"><a href="#" class="buyBtn">Buy Now</a></td>
    <td width="49%" align="left" valign="top"></td>
  </tr>
</table>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>


<div class="cart">
            <div class="number">0</div>


    <div class="cartView">

                <table width="100%" class="itmCart">

                        <td width="16%" class="item"><img src="images/cartPrdView.png" width="55" height="73" alt=" "></td>
                        <td width="71%">Anniversasdfry Card Pink Rose X 1: Rs 149/-</td>
                        <td width="13%" align="center"><a href="#" class="delRow"><img src="images/cross-script.png" width="16" height="16" alt=" "></a></td>
                    </tr>
                </table>


                <table width="100%" class="price">
  <tr>
    <td width="50%">Item Cost</td>
    <td align="right">Rs 649.00 /-</td>

  </tr>
  <tr>
    <td>Shipping Cost</td>
    <td align="right">Rs 30.00 /-</td>
  </tr>
  <tr>
    <td><span>Amount Payable</span></td>
    <td align="right"><span>Rs 679.00 /-</span></td>
  </tr>

              </table>
                <table width="100%" class="btnCont">
                    <tr>
                        <td align="center"><a href="#" id="CrtBtn"> Show cart</a></td>
                        <td align="center"><a href="#" id="CrtBtn">Pay now</a></td>
                    </tr>
                </table>



            </div>







        </div>

css

.oneItem{background:red; color:#fff; border-radius:110px; padding:0px 14px; float:left; font-weight:bold; font-size:14px; position:absolute; top:0; left:0;}

.cart{position:absolute;}
 .cart .cartView{position: absolute; background: red; width: 350px; padding: 8px; left: -5px;
 top: 30px; z-index:999; behavior: url(css/PIE.htc);  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius:5px; display:none;
}

脚本

function opencart(){

        //alert('hi')
        $('.cart').children('.cartView').slideDown(200);

    setTimeout(function(){


        $('.cart').children('.cartView').slideUp(200);

            },2000)






        }

$('.buyBtn').click(function () {

        $(this).append("<div class='oneItem'>1</div>")
        var buyPos = $(this).position();
        var buyPosL = buyPos.left;
        var buyPosT = buyPos.top;

        var CartPos = $('.cart .number').offset();
        var CartPosL = CartPos.left;
        var CartPosT = CartPos.top;

        $('.oneItem').css({
            left: buyPosL + 'px',
            top: buyPosT + 'px'
        })

        $('.oneItem').animate({
            left: CartPosL + 'px',
            top: CartPosT + 'px'
        }, 1000, function () {

            $(this).remove();
            opencart();
        })



    })

在此代码中，我的购物车以红色代码打开，工作正常，但购物车在 2 秒后关闭。当用户将鼠标悬停在购物车上以及当用户将鼠标从购物车中移出时如何停止购物车关闭

请帮助我提前谢谢.. :)

score 1 · Accepted Answer

这里 jsfiddle http://jsfiddle.net/uVdb3/6/

我只是检查是否悬停然后再次运行 setTimeout 否则 slideUp。

    function test(){
    setTimeout(function(){
        if($('.cart').children('.cartView').is(':hover')){
            test();
            return false
        }

        $('.cart').children('.cartView').slideUp(200);}
      ,2000);

}

score 0 · Accepted Answer

试试这个可行的解决方案。

function opencart(){

        //alert('hi')
        $('.cart').children('.cartView').slideDown(200);

        window.setTimeout(checkHover,2000);

}

function checkHover(){

       if(!$('.cartView').is(':hover')){
          $('.cart').children('.cartView').slideUp(200);
       }else{
               setTimeout(checkHover,2000);
       }
}

工作演示

score 0 · Accepted Answer

 $('.buyBtn').click(function () {
    // ... Your Code
    //Add This Code  
     $( ".buyBtn" )
           .mouseover(function() {
              $('.cart').children('.cartView').slideDown(200);
            })
          .mouseout(function() {
              $('.cart').children('.cartView').slideUp(200);
           });
 });

检查演示

score 0 · Accepted Answer

使用setInterval()而不是setTimeout(). 一旦您slideUp()使用购物车clearInterval()停止运行该功能的时间间隔。

var slid;
slid = setInterval(hide, 2000);
function hide(){
    if($('.cart').is(':hover')){
        $('.cart').children('.cartView').slideUp(200);
        clearInterval(slid);
    } else {}
}

JSFIDDLE 演示

jquery - 在使用 jquery 的函数中使用 setTimeout()

4 回答 4

Related

Reference