jquery - jquery帮助延迟

Question

我试图在每个动画之间添加延迟。

试过了

slicebox = $( '#sb-slider3' ).delay(2000).slicebox({

在最后一个，但不是快乐。有任何想法吗？对 jQuery 来说还是新手

---

完整代码如下

<script type="text/javascript">
$(function() {
    var Page = (function() {
        var $navArrows = $('#nav-arrows').hide(),
            $navDots = $('#nav-dots').hide(),
            $nav = $navDots.children('span'),
            $shadow = $('#shadow').hide(),
            slicebox = $('#sb-slider3').delay(2000).slicebox({
                onReady: function () {
                    $navArrows.show();
                    $navDots.show();
                    $shadow.show();
                },
                onBeforeChange: function(pos) {
                    $nav.removeClass('nav-dot-current');
                    $nav.eq(pos).addClass('nav-dot-current');
                }
            }),
            init = function() {
                initEvents();
            },
            initEvents = function() {
                // add navigation events
                $navArrows.children(':first').on('click', function() {
                    slicebox.next();
                    return false;
                });
                $navArrows.children(':last').on('click', function() {
                    slicebox.previous();
                    return false;
                });
                $nav.each(function(i) {
                    $(this).on('click', function(event) {
                        var $dot = $(this);
                        if (!slicebox.isActive()) {
                            $nav.removeClass('nav-dot-current');
                            $dot.addClass('nav-dot-current');
                        }
                        slicebox.jump(i + 1);
                        return false;
                    });
                });
            };
        return {
            init: init
        };
    })();
    Page.init();
});
</script>

然后重复

slicebox = $( '#sb-slider3' ).delay(2000).slicebox( {

变成

slicebox = $( '#sb-slider2' ).delay(1000).slicebox( {

和 slicebox = $( '#sb-slider0' ).delay(3000).slicebox( {

有任何想法吗？

Answer 1

delay()仅对动画有用，但您可以使用queue()将您自己的函数注册到动画队列：

slicebox = $("#sb-slider3").delay(2000).queue(function() {
    $(this).slicebox({
        onReady: function() {
            $navArrows.show();
            $navDots.show();
            $shadow.show();
        },
        onBeforeChange: function(pos) {
            $nav.removeClass('nav-dot-current');
            $nav.eq(pos).addClass('nav-dot-current');
        }
    }).dequeue();
});

这可能比setTimeout() 更具可读性（并且更易于链接）。