Question

我正忙着弹出一个弹出窗口。我想做的是制作一个带有号召性用语的弹出窗口。我在一个固定在按钮上的盒子里放了一个可点击的div。单击此div时，它会打开。一切正常，但是我希望可以在短时间内将可点击的div滑动以真正引起注意。但是，如何在我的jquery脚本中添加延迟？ :-)

希望有人知道答案。

你可以在这里看到我的Jquery： 好吧，它不是那么顺利，因为，我不习惯在片段中工作。

$(document).ready(function(){
    $("#closedbox").click(function(){
        $("#openbox").slideDown(500);
        $("#xbutton").delay(300).show(400);
        
        
       
    });
});

$(document).ready(function(){
    $("#xbutton").click(function(){
        $("#openbox").slideUp(500);
        $("#xbutton").hide(500);
    });
});

#closedbox{
    width: 270px;
    background-color: #fda99b;
    bottom: 0;
    height: 50px;
    position: fixed;
    left: 5%;
  }
  
  #closedbox-text{
    color: #fff;
    text-align: center;
    margin: 15px 0 10px 0;
    text-decoration: underline;
  }
    #closedbox-text:hover{
    color: #965d54;
    
  }
  
  #openbox{
    position:fixed;
    background-color: #efefef;
    width:600px;
    height: 300px;
    bottom:0;
    left:5%;
    display:none;
  }
  
  #xbutton{
    border-radius: 50%;
    padding: 1px 8px 2px 8px;
    position: fixed;
    margin-left: -10px;
    margin-top: -10px;
    bottom: 287px;
    left:5%;
    display:none;
      -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
  }
  #xbutton:hover{
      -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
  }

<html>
<head>
	<title>Popup</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
</head>
<body>
  <div id="closedbox">
       <p id="closedbox-text">Spar -30% p&aring; Asics sneaks</p>
  </div>

  <div id="openbox">
      <a href="https://www.lykkebylykke.dk/shop/graviditetstoej-245c1.html"><img src="/images/looks/popup/180418-sliderasics.jpg" />
      </a>
  </div>
  <button id="xbutton">x</button>
</body>
</html>

最基本的问候拉塞

Answer 1

以下是你已经做过的事。

$(document).ready(function(){
    $("#xbutton").click(function(){
        $("#openbox").slideUp(500);
        $("#xbutton").hide(500);
    });
});

您可以像

一样重写此内容

$(document).ready(function(){
    $("#xbutton").click(function(){
        setTimeout(function(){
            $("#openbox").slideUp(500);
        }, 500); //This will trigger the anonymous function declared in the setTimeout() after 500 milliseconds.

        $("#xbutton").hide(500);
    });
});

在弹出窗口显示隐藏延迟

1 个答案: