jQuery停止和啟動計時器

Question

嗨，我的網站上有一個演示：treethink.treethink.net/backup

我在計時器的右邊有正在縮回的新聞自動收錄器，當您單擊導航項目時，我讓自動收報器縮回了，但是我需要結束計時器以使其保持縮回狀態。 然后，當您單擊關閉按鈕時，我需要再次啟動計時器。

這是我的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

我認為您需要調用stopTime() ，因為您正在使用jQuery 計時器插件。

使用普通的舊javascript，這些是setInterval和clearInterval方法。

如果將一些代碼重構為用於啟動和停止計時器並封裝邏輯的函數，則可能會更容易。 newsTicker的“對象”可以跟蹤當前啟用的股票行情，並旋轉當前/下一個。 我對股票行情類型的東西做了類似的操作，如果將鼠標懸停在該區域上，它將暫停，但是一旦將鼠標移開，它就會重新開始。 使用更簡明易懂的內容-標准javascript方法或jQuery timer插件。

例如

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

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

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