Question

我有一个jQuery循环脚本（我写的，所以它的质量不高）基本上通过动画不透明度来循环<li>个元素。例如，假设我有三个<li>元素。该脚本将设置所有元素的不透明度，但第一个设置为0，然后当单击“下一个”按钮时，它会将第一个的不透明度设置为0，然后将第二个的不透明度设置为1，并且等等。与此同时，我每隔4秒运行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

在动画期间阻止鼠标事件。
每次我使用这种方法。
等，

$('#newsLeft').click(function() {
    if($(this).hasClass('blockEvent')) return false; // return if it's locked
    $(this).addClass('blockEvent');        // lock it with 'blockevent' class         

    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');
                $('#newsLeft').removeClass('blockEvent'); // unlock after all animations
        });
    });

    return false; 
}); //clickRight

祝你好运：）

Answer 2

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

var animTimerDelay = 4000,
    animTimerID = null;

function animTick() {
    // Animation code here

    resetTimer();
}

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

    animTimerID = setTimeout(animTick, animTimerDelay);
}

css-opacity问题

2 个答案: