jQuery Stopping and Starting Timers

Question

Hi I have a demo going here of my site: treethink.treethink.net/backup

I have the retracting news ticker on the right on a timer, when you click a nav item I got the ticker to retract but I need to end the timer so that it stays retracted. Then when you click the close button I need to start the timer again.

Here is my jQuery:

    /* News Ticker */

    /* Initially hide all news items */

    $('#ticker1').hide();
    $('#ticker2').hide();
    $('#ticker3').hide();

    var randomNum = Math.floor(Math.random()*3); /* Pick random number */

    $("#ticker").oneTime(2000,function(i) { /* Do the first pull out once */

        $('div#ticker div:eq(' + randomNum + ')').show(); /* Select div with random number */

        $("#ticker").animate({right: "0"}, {duration: 800 }); /* Pull out ticker with random div */

    });

    $("#ticker").oneTime(15000,function(i) { /* Do the first retract once */

        $("#ticker").animate({right: "-450"}, {duration: 800}); /* Retract ticker */

        $("#ticker").oneTime(1000,function(i) { /* Afterwards */

            $('div#ticker div:eq(' + (randomNum) + ')').hide(); /* Hide that div */

        });

    });

    $("#ticker").everyTime(16500,function(i) { /* Everytime timer gets to certain point */

        /* Show next div */

        randomNum = (randomNum+1)%3;

        $('div#ticker div:eq(' + (randomNum) + ')').show();

        $("#ticker").animate({right: "0"}, {duration: 800}); /* Pull out right away */


        $("#ticker").oneTime(15000,function(i) { /* Afterwards */

            $("#ticker").animate({right: "-450"}, {duration: 800});/* Retract ticker */

        });

        $("#ticker").oneTime(16000,function(i) { /* Afterwards */

            /* Hide all divs */

            $('#ticker1').hide();
            $('#ticker2').hide();
            $('#ticker3').hide();

        });

    });

/* Nav Items */

    $("#nav li").click(function() { /* On click */

        $("#ticker").animate({right: "-450"}, {duration: 800});/* Retract ticker */

        $("#content").stop()                    
        .animate({
            top: '0'
        }, 750);

        $("#content").oneTime(750,function(i) {

            $("#content-footer-top").stop()                 
            .animate({
                bottom: '42px'
            }, 250);

            $("#content-footer").stop()                 
            .animate({
                bottom: '0'
            }, 250);

        });

    });

    $("li#close").click(function() { /* On click */

        $("#content").oneTime(1000,function(i) {

            $('#content div.content-page').hide();

        }); 

        $("#content").oneTime(250,function(i) {

            $("#content").stop()                    
            .animate({
                top: '-100%'
            }, 750);

        });

        $("#content-footer-top").stop()                 
        .animate({
            bottom: '-46px'
        }, 250);

        $("#content-footer").stop()                 
        .animate({
            bottom: '-88px'
        }, 250);

    });

    $('#content div.content-page').hide();

    $("#nav li#services").click(function() {
        $('#content #services').show();
    });

    $("#nav li#portfolio").click(function() {
        $('#content #portfolio').show();
    });

    $("#nav li#contact").click(function() {
        $('#content #contact').show();
    });

Answer 1

I think you need to call stopTime() as it appears you are using the jQuery timers plugin.

Using plain old javascript, these are the setInterval and clearInterval methods.

If you refactored some code into functions that start and stop the timers and encapsulate the logic, it might be easier. The newsTicker "object" can keep track of the currently enabled ticker, and rotate out current / next. I did a similar thing for a ticker-type thing that would pause if you hovered over the area, but would restart once you moused away. Use whatever is more concise and understandable - the standard javascript methods, or the jQuery timer plugin.

e.g.

$().ready( {
    newsTicker.init(); 

    $("#navBar").hover(newsTicker.pause, newsTicker.play);
};

var newsTicker = {
    init: function () { ... },
    pause: function() { ... }, 
    play: function() { ... }
};