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 timers插件。

使用纯旧的javascript，这些是setInterval和clearInterval方法。

如果将一些代码重构为启动和停止计时器并封装逻辑的函数，则可能更容易。 newsTicker“对象”可以跟踪当前启用的自动收报机，并旋转当前/下一个。我做了一个类似的事情，如果你在这个区域上空盘旋，它会暂停，但是一旦你被抛弃就会重新启动。使用更简洁和易懂的东西 - 标准的javascript方法，或者jQuery timer插件。

e.g。

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

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

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

jQuery停止和启动计时器

1 个答案: