Javascript/jquery淡入淡出效果衰减

Posted 2023-05-08

【中文标题】Javascript/jquery淡入淡出效果衰减

【英文标题】：Javascript/jquery fade effect decay

【发布时间】：2013-02-20 13:23:30

【问题描述】：

这次非常具体，我有以下代码来根据条件循环一些淡入淡出，正如您所看到的，动画根据状态略有不同。

目前它正在产生我想要的效果，但它似乎逐渐变慢，直到大约 3 分钟它完全停止。

我已经到了不能再盯着它看的地步了！谁能给我一些关于如何使它成为一个连续循环的建议？

这是一个小提琴：http://jsfiddle.net/CbNc5/

var glimmerLen = 16;
var initiated = false;
var animateLoop = false;
var timeout;


function glimmerAnimate() 
if (!initiated) 
    timeout = window.setTimeout(function() glimmerAnimate();, 2500);
    initiated = true;

 else if (!animateLoop && initiated) 
    $("#glimmer li").fadeTo(1500, 0.5, function()
        glimmerAnimate();
        animateLoop = true;
    );
 else if (animateLoop) 
    var rangeMax = glimmerLen + 1;
    var randObj = Math.floor(Math.random() * rangeMax);

    $("#glimmer-" + randObj).fadeTo(1500, 0.8, function() 
        $("#glimmer-" + randObj).fadeTo(2000, 0.2);
            glimmerAnimate();
    );

【参考方案1】：

我已经重写了，希望对你有帮助 (http://jsfiddle.net/CbNc5/5/)

function fadeLoop(e) 
    $(e).fadeTo(Math.random() * 500, 0.2, function () 
        $(this).fadeTo(Math.random() * 500, 1, function () 
            fadeLoop(this);
        );
    );


$('li').each(function () 
    fadeLoop(this);
);

附：如果你只想要循环不透明度，你可以使用CSS3，它会更简单

【讨论】：

更新：不需要关闭 =)

更新：添加随机持续时间