javascript - JS从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>

这里的不同之处在于它使用超时函数来初始化和关闭 slider 。这两个函数(初始化和关闭)是分开的，因此您可以随时使用它们。

您可以操纵 slider 打开和关闭的时间。现在打开时间为 2000，这意味着(约 2 秒)，关闭时间为 5000(约 5 秒)。

仅当按钮可用时才会起作用，因为使用 .slidebttn 元素找到要滑动的元素。