0

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

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

很高兴为这个特定场景找到一个解决方案，但如果可能的话，还有一个关于暂停/恢复自定义函数的更通用的解决方案，据我所知 .stop 不起作用，除非该函数是一个官方的 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)


        }


});
4

1 回答 1

2

一个简单的方法是存储一个可由另一个函数访问的标志，例如单击按钮的回调。在您的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);
    }
});​​​

你可以在这里查看。

于 2012-11-27T15:35:40.447 回答