We help IT Professionals succeed at work.

Slide in after delay, Div  CSS/JS not working.

Jon Imms
Jon Imms asked
on
Trying to get a div to slide in from the left and stick to the bottom of the page, after a 4 second delay on page load.

The div appears on page load, no delay, or slide-in effect.

html
<div id="slidebox" class="show modal">
    <!-- ACF ad url here -->
    <a href="#">
    <!-- ACF img here -->
        <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg" alt="-ad" width="300" height="250">
    </a>
</div><!-- /.slidebox -->

Open in new window


CSS
#slidebox.show {
  left: 0;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
#slidebox {
  max-width: 300px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: -430px;
  z-index: 10;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.show {
  display: block;
}

Open in new window



js
jQuery(document).ready(function($) {
  setTimeout(function() {
    $('#slidebox').delay(4000).fadeIn(500);
  }, 4000); // milliseconds. set to 10 seconds.
});

Open in new window

Comment
Watch Question

Initially, the div should not have the class "show", that makes it be hidden.
<div id="slidebox" class="modal">
    <!-- ACF ad url here -->
    <a href="#">
    <!-- ACF img here -->
        <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg" alt="-ad" width="300" height="250">
    </a>
</div><!-- /.slidebox -->

Open in new window

Then the following script adds the class "show" to the div.
jQuery(document).ready(function($) {
  setTimeout(function() {
    $('#slidebox').addClass("show");
  }, 4000); // milliseconds. set to 10 seconds.
});

Open in new window

Your CSS transition directives take care of the div appearance.
Jon ImmsWeb Developer

Author

Commented:
Awesome, Thank you.
You're welcome.