How to slide out an element when page loads?

Question

Here is an example of this with hover http://jsfiddle.net/MK87R/1/

I want to slide on page load not hover. How do I do this? Note, I prefer a react solution. However, a CSS/HTML solution would be nice too.

Here is some sample code:

<div id="slideout">
  <img src="http://eduardovalencia.com/wp-content/uploads/2011/03/FEEDBACK-LOGO-PURPLE.jpg" alt="Feedback" />
  <div id="slideout_inner">
    Hi Welcome to Stack Overflow
  </div>
</div>

CSS:

#slideout {
    position: fixed;
    top: 40px;
    left: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout_inner {
    position: fixed;
    top: 40px;
    left: -250px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout:hover {
    left: 250px;
}

#slideout:hover #slideout_inner {
    left: 0;
}

img {
    width: 100px;
    height: 100px;
}

I don't believe you can achieve this with a simply modification since the hover event can't be triggered programatically. Related https://stackoverflow.com/questions/4347116/trigger-css-hover-with-js — E. Sundin, Nov 10 '18 at 01:45
I'm NOT trying to trigger a HOVER EVENT. When the page loads I want the animation/css to slide texts or a component from the left border of the page into the page. I've tried using componentDidMount with a setTimeout to add a class however this doesn't animate the content. — guest554543, Nov 10 '18 at 01:48
I see, I misread your post. Here is a solution without hover and only on page load http://jsfiddle.net/MK87R/477/ — E. Sundin, Nov 10 '18 at 02:00

score 0 · Answer 1 · answered Nov 10 '18 at 03:18

0

Here is a solution using JQuery and its .animate() method..

http://jsfiddle.net/MK87R/510/

$('#slideout_inner').animate({left: 0});

answered Nov 10 '18 at 03:18

beckman

65
1
12

score 0 · Answer 2 · answered Jul 25 '19 at 23:56

I would change the :hover to a class .open and then add the class on body load:

const slideout_el = document.getElementById('slideout')

window.onload = () => slideout_el.classList.add('open')

#slideout {
  position: fixed;
  top: 40px;
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout_inner {
  position: fixed;
  top: 40px;
  left: -250px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout.open {
  left: 250px;
}
#slideout.open #slideout_inner {
  left: 0;
}
img
{
    width:100px;
    height:100px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="slideout">
  <img src="http://eduardovalencia.com/wp-content/uploads/2011/03/FEEDBACK-LOGO-PURPLE.jpg" alt="Feedback" />
  <div id="slideout_inner">
    Hi Welcome to Stack Overflow
  </div>
</div>
</body>
</html>

How to slide out an element when page loads?

2 Answers2