css-opacityの問題

Question

私はjQueryのサイクルスクリプト（これは高品質ではないので書きました）は基本的には、不透明度をアニメーション化して<li>要素を循環させます。たとえば、3つの<li>要素があるとします。スクリプトはすべての要素の不透明度を設定しますが、最初の値を0に設定し、「次へ」ボタンをクリックすると、最初の不透明度を0にアニメーション化し、2番目の不透明度を1にアニメートし、そうです。同時に、setIntervalが実行されていて、文字通りのクリックが4秒ごとに「次へ」をクリックします。

setIntervalと同時に「次へ」ボタンをクリックすると、要素の不透明度が上がり、いくつかの要素が互いに重なり合ってしまうという問題があります。

誰も解決策を提案できますか？ .css('opacity')の代わりに.hide()関数を使用した方が良いでしょうか？

EDIT：これはコードです

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

幸運:)次のボタンが推移したとき