Question

这源于'http://stackoverflow.com/questions/8369174/setting-a-time-for-flicker-animation-on-img'

我无法弄清楚如何将闪烁动画的超时设置为超时并始终显示我的图像。现在 - 它按照应有的方式闪烁，但每次其他页面访问/浏览器刷新，动画后图像不再显示。这是我的标志，所以我希望它闪烁（就像一个暗淡的标志），在它闪烁一下后，它只是正常显示。

这是我正在尝试的代码：

<script>


$(document).ready(function(){
    var t;
    var amount = 0;
    const fparam = 100;
    const uparam = 100;

    function timeout(f, t) {   // this function delegates setTimeout
        if(amount++ < 50) {   // and checks the amount already (un)flickered
             setTimeout(f, t); // (150 * 100 ms = 15 s)
        }
    else if(amount === 50) { unflickr(); }
    }

    var flickr = function(){
        if(Math.round(Math.random())){
            $("#logodcoi").css("visibility","hidden");
            t = timeout(unflickr,uparam);
        }
        else
            t = timeout(flickr,fparam);

    };


    var unflickr = function(){
        if(Math.round(Math.random())){
            $("#logodcoi").css("visibility","visible");
            t = timeout(flickr,fparam);
        }
        else
            t = timeout(unflickr,uparam);
    };

    t = timeout(flickr,fparam);
});

</script>

Answer 1

图像消失的原因是Math.random()中的unflickr调用未返回偶数，然后隐藏图像。

为了解决这个问题，我稍微修改了你的代码，检查已经完成的迭代次数，并在timeout函数中添加另一个条件来清除超时（这应该更好，因为原来的意思是代码将在显示页面时永远运行，这会占用内存）然后在传递所需的轻弹数量时显示图像：

var t;
var amount = 0;
var maxFlickrs = 50
const fparam = 100;
const uparam = 100;

function timeout(f, t) { // this function delegates setTimeout
    if (amount++ < maxFlickrs ) { // and checks the amount already (un)flickered
        setTimeout(f, t); // (150 * 100 ms = 15 s)
    }
    else if (amount === maxFlickrs ) {
        unflickr();
    }
    else {
        // had number of iterations set in maxFlickrs, stop flickering and display image.
        clearTimeout(t);
        $("#logodcoi").css("visibility", "visible");
    }
}

var flickr = function() {
    if (Math.round(Math.random())) {
        $("#logodcoi").css("visibility", "hidden");
        t = timeout(unflickr, uparam);
    }
    else
        t = timeout(flickr, fparam);

};

var unflickr = function() {
    if (Math.round(Math.random())) {
        $("#logodcoi").css("visibility", "visible");
        t = timeout(flickr, fparam);
    }
    else
        t = timeout(unflickr, uparam);
};

t = timeout(flickr, fparam);

Fiddle to show it working

Answer 2

为什么重新发明轮子？但是，您需要包含jquery UI：http://jqueryui.com/download

$('the element in question').effect("pulsate", { times:3 }, 1000);

设置闪烁动画超时

2 个答案: