CODEWITHSUNDEEP
jquerypopupdelay
Lasse madsen
Lasse madsen

Reputation: 9

show hide delay on popup

I'm struggling with a popup. What I want to do is to make a popup with a call to action. I have placed a clickable div in a box fixed to buttom. When this div is clicked it opens. All that works fine, however i would like the clickable div to slideUp after a short amount of time to really call attention. However, how do I place a delay in my jquery script? :-)

Hope someone know the answer.

You can see my Jquery here: Well, it isnt working so smooth, because, im not used to work in snippet. 

$(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>

Bedst regards Lasse

Upvotes: 0

Views: 420

Answers (1)

Romeo Sierra
Romeo Sierra

Reputation: 1756

Following is what you do already.

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

You could rewrite this like

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

Upvotes: 1

Related Questions