Question

Sequence JS是一个灵活的响应滑块，我想在我的网站上使用它。我希望在网站宽度低于阈值时隐藏滑块。在bootstrap响应实用程序类的帮助下，到目前为止我已经实现了这一目标：

.
.
.
$(window).on('resize', function () {
    // .navbar-toggle appears when browser width is narrow
    if ($('.navbar-toggle').is(':visible')) {
        if (!$sequence.isPaused) {
            $sequence.pause();
            $("#slider").hide();
        }
    } else {
        if ($sequence.isPaused) {
            $("#slider").show();
            $sequence.unpause();
        }
    }
});
// Check if browser have the required width intially
$(window).trigger('resize');
.
.
.

乍一看它看起来还不错，实际上90％的时间都有效！但有时在缩小浏览器宽度（隐藏滑块）然后扩展浏览器宽度（显示滑块）之后，滑块会停止动画并在其隐藏之前的最后一帧停止。

Answer 1

序列监视其动画元素以确定它们何时停止。如果在动画期间隐藏序列，它将不知道元素何时完成动画，因此停止。

我建议销毁序列并启动它代替隐藏/显示。

未测试：

if ($('.navbar-toggle').is(':visible')) {
  $("#slider").destroy();
} else {
  $("#slider").sequence(options).data("sequence");
}

在Sequence.js下载中，您将找到名为example-functions的目录。其中包含您可能想参考的.destroy()演示。

Answer 2

在摆弄之后，我终于找到了这个解决方案。而不是“暂停”，“停止”autoPlay将成功。这是：

.
.
.
$(window).on('resize', function () {
    // .navbar-toggle appears when browser width is narrow
    if ($('.navbar-toggle').is(':visible')) {
        if (!$sequence.isPaused) {
            $sequence.stopAutoPlay();
            $("#slider").hide();
        }
    } else {
        if ($sequence.isPaused) {
            $("#slider").show();
            $sequence.startAutoPlay(500); // Add a small delay here
        }
    }
});
// Check if browser have the required width intially
$(window).trigger('resize');
.
.
.

Sequence JS - 隐藏并显示序列滑块

2 个答案: