Question

I have items being added and removed (append & prepend) and would like this to pause on both hover and on a click.

Please see my custom function I have built below. I would like to be able to pause this sequence by clicking a button with a certain class and resume it with the same button (play/pause type of thing. Ideally it would also pause onhover of the div to which the items are being added/removed.

It would be great to get a solution for this particular scenario but also if possible a more general one regarding pausing/resuming custom functions as I understand .stop does not work unless the function is an offical jquery one

Any help/Guidance is much appreciated, I am fairly new to this so the more thorough (idiot’s guide) an explanation the better

Thanks!

$(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

An easy way to do it is to store a flag that can be accessed by another function, such as the callback from a click on a button.
At the beginning of your add_item() function, you should check that that flag is properly set, allowing you to go on.

In your example:

$(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);
    }
});​​​

You can check this Here.