Question

嗨朋友们需要你的帮助我试图为购物车开发UI。我需要显示购物车，当用户点击购买按钮购物车将显示两秒然后隐藏。现在的问题是，如果用户将鼠标悬停在打开的购物车上，一旦用户从购物车鼠标输出进行基本演示，您就可以转到此链接 http://jsfiddle.net/uVdb3/5/ ，或者您可以在下面看到我的代码< / p>

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秒钟。如何在用户将鼠标放在购物车上时停止购物车关闭，当用户将鼠标从购物车中鼠标移出时

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

Answer 1

HEre 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);

}

Answer 2

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

Check for DEMO

Answer 3

使用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 DEMO

Answer 4

尝试这个有效的解决方案。

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);
       }
}

<强> Working Demo

使用jquery在函数中使用setTimeout（）

4 个答案: