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;
}
Here is a solution using JQuery and its .animate() method..
http://jsfiddle.net/MK87R/510/
$('#slideout_inner').animate({left: 0});
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.