JS从HOVER到ONLOAD

Question

i'm trying to edit some existing code to fulfill my need.

https://tympanus.net/codrops/2010/02/08/awesome-css3-jquery-slide-out-button/

It's effect of sliding out content after you hover over it with the mouse is what i am after. Seems simple enough, but i would rather have it on a (automatic) timer. Or rather have no interaction from the user at all for it to work.

Let's say it starts closed, then opens up after 2 seconds. Stays open voor 5 seconds and then closes again. All without using the mouse to activate it.

<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 tips on what i need to edit to reach my goal?

JSFiddle: https://jsfiddle.net/mj7yumfw/14/

Answer 1

Try this one:

<script type="text/javascript">
$(function() {
    setTimout(initSlider, 2000);
});
function initSlider() {
    open();
    setTimeout(close, 5000);
}
function open() {
    var $this       = $('.slidebttn');
    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       = $('.slidebttn');
    var $slidelem   = $this.prev();
    $slidelem.stop().animate({'width':'70px'},700);
    $slidelem.find('span').stop(true,true).fadeOut();
    $this.removeClass('button_c');
}
</script>

What is different here is that it's using timeout functions to initialize and close slider. These two function (initialize and close) are separated, so you can use them whenever you want.

You can manipulate the time when you're slider opens and closes. Opening time is 2000 right now, which means (~2s) and closing is 5000 (~5s).

It will work only when the buttons are available as the element to slide is found using .slidebttn element.