JS from HOVER〜ONLOAD

Question

私のニーズを満たすために既存のコードを編集しようとしています。

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

それはあなたがマウスで上にカーソルを移動した後、コンテンツをスライドの効果だが、私が後だものです。シンプルだと思われますが、私はむしろ（自動）タイマーでそれを持っています。むしろ、それが機能するためにユーザからのインタラクションを全く持たない。

いったん閉じてから、2秒後に開きます。 5秒間開いてからもう一度閉じます。マウスを使用せずにすべてそれをアクティブにする。

<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> 

私の目標に到達するために編集が必要な情報はありますか？

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

Answer 1

は、この方法を試してください。

<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> 

ここでは異なるとは何か、初期化し、近くにスライダーためにタイムアウト機能を使っているということです。これらの2つの機能（初期化と終了）は分離されているため、いつでも使用できます。

スライダを開閉している時間を操作できます。 開業時間は現在2000であり、（〜2s）を意味し、閉鎖は5000（〜5s）です。

要素が.slidebttnの要素を使用して見つかったため、ボタンが使用可能な場合にのみ機能します。