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>

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

您可以在滑块打开和关闭时操纵时间。现在开放时间是2000，这意味着（~2s），结束时间是5000（~5s）。

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

JS从HOVER到ONLOAD

1 个答案: