Question

我有添加和删除的项目（附加和前置），并希望在暂停和点击时暂停。

请参阅我在下面构建的自定义功能。我希望能够通过单击具有某个类的按钮来暂停此序列，并使用相同的按钮（播放/暂停类型的东西）恢复它。理想情况下，它也会暂停在正在添加项目的div的上方/除去。

获得这个特定场景的解决方案会很棒，但如果可能的话，也可以使用更为通用的关于暂停/恢复自定义函数的解决方案。除非函数是一个正式的jquery，否则停止不起作用

任何帮助/指导都非常感谢，我对此相当新，所以更彻底（白痴的指南）更好的解释

谢谢！

$(function() {


   var SECONDS_BETWEEN = 5;
        var SLIDE_DURATION  = 1;
        var FADE_DURATION   = 1;

        var items = [];

         $(document).ready(function() {
            $('.item').each(function() {items.push($(this)); $(this).remove()});
            add_item();
        });

        function add_item() {
            var item = items.shift();


             item.removeAttr('style');
            item.find('.contentitem').removeAttr('style');   

            item.hide().prependTo('.innerwrapper')
                .slideDown(
                    SLIDE_DURATION*1000, 
                    function() {           
                        item.find('.contentitem').fadeTo('slow', 1);
                    }
                );


            items.push(item);


            setTimeout(add_item, SECONDS_BETWEEN*1000)


        }


});

Answer 1

一种简单的方法是存储一个可以被另一个函数访问的标志，例如点击按钮时的回调。在add_item()函数的开头，您应该检查该标志是否已正确设置，以便继续。

在你的例子中：

$(function() {
    var SECONDS_BETWEEN = 5;
    var SLIDE_DURATION  = 1;
    var FADE_DURATION   = 1;

    /* Define a flag to pause the animation */
    var paused = false;
    var items = [];

     $(document).ready(function() {
        $('.item').each(function() {items.push($(this)); $(this).remove()});
        add_item();
     });


     $(".togglebutton").click(function() {
         /* Toggle the animation */
         paused = !paused;
     });

    function add_item() {
        /* Check the flag */
        if(!paused) {
            var item = items.shift();
            item.removeAttr('style');
            item.find('.contentitem').removeAttr('style');   

            item.hide().prependTo('.innerwrapper')
                .slideDown(
                    SLIDE_DURATION*1000, 
                    function() {           
                        item.find('.contentitem').fadeIn('slow');
                    }
                );

            items.push(item);
        }
        setTimeout(add_item, SECONDS_BETWEEN*1000);
    }
});

您可以查看Here。

如何暂停自定义功能

1 个答案: