2013-02-18 3 views
0

카드 목록을 쓰고 있습니다.
카드 목록의 li 요소에는 mouseenter와 mouseleave 이벤트가 있습니다. 빠르게 두 요소 사이에 교환, 리튬 요소가 이상한 행동으로 여기
중복 jquery mouseover 이벤트

mouseenterCard: function(index) { 
    var nOnRight = index+2; 
    var n = index+1; 

    if (n!=1) { 
     $('#cards-list li:nth-child('+n.toString()+')').animate({'margin-left': '30px'}, 
                   "fast", 
                   function() { 

                   }); 
    } 
    $('#cards-list li:nth-child('+nOnRight.toString()+')').animate({'margin-left': '30px'}, 
                    "fast"); 
}, 
mouseleaveCard: function(index) { 
    var nOnRight = index+2; 
    var n = index+1; 
    if (n!=1) { 
     $('#cards-list li:nth-child('+n.toString()+')').animate({'margin-left': marginLeft.toString()+'px'}, 
                   "fast", 
                   function() { 

                   }); 
    } 
    $('#cards-list li:nth-child('+nOnRight.toString()+')').animate({'margin-left': marginLeft.toString()+'px'}, 
                    "fast"); 
} 

$('#cards-list').on('mouseenter', 'li' ,function(e){ 
    CardList.getInstance().mouseenterCard($(this).index()); 
}); 

$('#cards-list').on('mouseleave', 'li' ,function(e){ 
    CardList.getInstance().mouseleaveCard($(this).index()); 
}); 

DEMO
입니다.
무엇이 문제입니까?

답변

0

동일한 요소를 여러 번 이동하면 애니메이션이 대기열에 추가됩니다.

$('#cards-list li:nth-child('+nOnRight.toString()+')').stop().animate(... 
0

당신은 디 바운싱 시도 할 수 있습니다/이벤트를 조절 : 당신은 (후자는 즉시 애니메이션을 종료) .stop 또는 .finish 중 하나를 사용하여 애니메이션을 중지해야합니다. 당신은 애니메이션을 실행 한 경우 http://benalman.com/projects/jquery-throttle-debounce-plugin/

는 애니메이션을 중단하도록하는 MouseLeave 이벤트() .stop 사용