I am currently modifying some preexisting code to suit my requirements.
https://tympanus.net/codrops/2010/02/08/awesome-css3-jquery-slide-out-button/
The sliding effect of the content when hovered with the mouse is what I am looking for. It seems straightforward, but I want it to activate automatically, without any user interaction.
Let's say it begins in a closed state, then opens after 2 seconds. It remains open for 5 seconds and then closes again, all without requiring mouse input.
<script type="text/javascript">
$(function() {
$('.slidebttn').hover(
function open() {
var $this = $(this);
var $slidelem = $this.prev();
$slidelem.stop().animate({'width':'225px'},800);
$slidelem.find('span').stop(true,true).fadeIn();
$this.addClass('button_c');
},
function close() {
var $this = $(this);
var $slidelem = $this.prev();
$slidelem.stop().animate({'width':'70px'},700);
$slidelem.find('span').stop(true,true).fadeOut();
$this.removeClass('button_c');
}
);
});
</script>
Any suggestions on what adjustments I should make to achieve my objective?
JSFiddle: https://jsfiddle.net/mj7yumfw/14/