javascript - css 不透明度问题

Question

我有一个 jQuery 循环脚本(我写的，所以质量不高)基本上循环 <li>通过动画化元素的不透明度。例如，假设我有三个 <li>元素。该脚本会将除第一个元素之外的所有元素的不透明度设置为 0，然后当单击“下一步”按钮时，它将第一个元素的不透明度设置为 0，然后将第二个元素的不透明度设置为 1，然后等等。同时，我有一个setInterval每四秒运行一次点击“下一步”按钮。

问题是，如果用户在点击 setInterval 的同时点击“下一步”按钮插入它，元素的不透明度就会困惑，一些元素最终会相互叠加。

谁能提出解决方案？如果我使用 .hide() 会更好吗？函数而不是 .css('opacity') ？

编辑:这是代码

$('ul#news > li').css({opacity:0.0}).filter('ul#news  li.firstNews').css({opacity:1.0});
$('#newsLeft').click(function() {

    var $active = $('ul#news li.active');
    var $next = $active.next().length ? $active.next() : $('ul#news li.firstNews');

        $active.animate({opacity:0.0}, 300, function() {
            //when done animating out, animate next in
            $next.css({opacity:0.0})
                .animate({opacity: 1.0}, 400, function() {
                $active.removeClass('active');
                $next.addClass('active');
        });
    });

    return false; 
}); //clickRight

Answer 1

悬停下一个按钮时重置动画计时器。示例如下。

var animTimerDelay = 4000,
    animTimerID = null;

function animTick() {
    // Animation code here

    resetTimer();
}

function resetTimer() {
    if (animTimerID !== null) {
        clearTimeout(animTimerID);
    }

    animTimerID = setTimeout(animTick, animTimerDelay);
}