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);
}

Answer 2

предотвращение события мыши во время анимации.каждый раз, когда я использую этот метод.вроде

$('#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

удачи :) 1004 *