css-opacity issue

Question

jQuery 싸이클 스크립트 (필자가 쓴, 고품질이 아니므로)는 기본적으로 opacity에 애니메이션을 적용하여 <li> 요소를 순환시킵니다. 예를 들어 세 개의 <li> 요소가 있다고 가정 해 보겠습니다. 스크립트는 모든 요소의 불투명도를 설정하지만 첫 번째 것은 0으로 설정하고 "다음"버튼을 클릭하면 첫 번째 요소의 불투명도를 0으로 애니메이션 한 다음 두 번째 요소의 불투명도를 1로 애니메이션화합니다. 등등. 동시에, 나는 setInterval을 실행하여 문자 그대로 클릭 4 초마다 "다음"버튼을 클릭하십시오.

사용자가 setInterval을 누르는 것과 동시에 "다음"버튼을 클릭하면 요소의 불투명도가 엉망이되고 일부 요소가 서로 겹쳐서 문제가됩니다.

누구나 해결책을 제안 할 수 있습니까? .css('opacity') 대신 .hide() 함수를 사용하면 더 잘 작동합니까?

편집 :이

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

행운 :) 다음 버튼을 가리킬 때