在弹出窗口中显示隐藏延迟

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

在弹出窗口中显示隐藏延迟

show hide delay on popup

jquery

popup

delay