How to use jQuery .slideUp() to make a floating button appear in the corner?

Question

I'm trying to get a button to slide up and appear in the bottom right corner of the screen after a user is on the page for 30 seconds.

How to do I start with the div hidden and then make it slide in from the bottom as it appears?

This hasn't worked so far:

<div id="buttonContainer" class="">
  <button>Submit</button>  
</div> 

  function showSurvey(){ $('#buttonContainer').slideUp('slow'); }; 

 #surveySpot { position: fixed; bottom: 20px; right: 20px } 

Answer 1

JQuery's .slideup() doesn't actually move the element, it's just an animation trick to hide and show elements.

Instead, you can do this entirely with CSS animation , no need for jQuery at all. You can create a keyframe animation to move the element into frame and then set a 30 second animation delay.

 .survey { position: fixed; bottom: 0; left: 0; right: 0; padding: 50px; background: cornflowerblue; /* translate off the bottom of the screen */ transform: translateY(100%); /* call the slideup keyframes and have them take 500 milliseconds */ animation: slideup 500ms ease-out forwards; /* delay the start of the animation by 5 second, you can use 30 */ animation-delay: 5s; } /* a very simple from/to keyframe we can call with the "animation" property */ @keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } } 

 <p>Wait 5 seconds for the survey to show...</p> <div class="survey">This is a survey</div>