jQuery를 호버/지연/fadeIn의 DIV의

Question

내가이 jQuery를 조각 우연히 그래서 때를, 어쨌든 http://jsfiddle.net/RExZs/

나는 호버 기능으로 바꿀려고 :

$(".faded").each(function(i) { 
    $(this).delay(i * 400).fadeIn(); 
});​ 

가 직접보기 nav-menu 버튼 위에 마우스를 올려 놓으면이 멋진 지연 효과로 div가 사라집니다. 그리고 마우스가 떠날 때, div는 사라져야합니다. '매장'버튼 (앵커) 용이므로 마우스로 가리키면 제품 목록을 표시하는 데 사용됩니다.

지금까지 내가 가지고 올 한 모든입니다

$(".products").hover(function(){ // I added THIS line 
    $(".products-list").hide().each(function(i) { 
    $(this).delay(i * 400).fadeIn(); 
    }); 
}); // and of course, THIS line 

문제는이 사업부의 한 빨리 페이지가로드, LOL 표시 시작한다는 것입니다.

이제 "저장"버튼을 가리키면 효과는 으로 끝나지만 마우스를 놓으면 다시 시작되어 해당 div가 다시로드됩니다.

내게 도움이되거나, 저의 jQuery 중독을 극복 할 수있는 곳을 말해주십시오. :)

고마워요!

Answer 1

마우스 - 인 및 마우스 - 아웃에 대해 별도의 동작이 필요합니다.

토글 할 때 기존 애니메이션을 중지하고 여분의 true 매개 변수로 애니메이션 대기열을 비우고 현재 애니메이션의 끝으로 이동해야한다는 매개 변수를 지정해야합니다.

$(".products").hover(function() { 
    $(".products-list").stop(true).each(function(i) { 
     $(this).delay(i * 200).fadeIn(); 
    }); 
}, function() { 
    $(".products-list").stop(true, true).fadeOut(); 
}); 

그것은 당신이 당신의 "로 마우스를"효과이 원하는 것을 따라 데모

Answer 2

에 대한 http://jsfiddle.net/alnitak/tvCBq/를 참조하십시오. jsFiddle

$(".products").hover(
function(){ 
    $(".products-list").each(function(i) { 
     $(this).delay(i * 400).fadeIn(); 
    }); 
}, 
function(){ 
    $(".products-list").stop(true).show().hide(); 
});​ 

PS : 당신은 항상 jQuery를의 최신 버전을 사용하려고합니다. .products에 마우스를 올리거나 내고 나서 빨리 항목을 퇴색하는 순서를 변경할 수 있습니다. 그러나 1.4 대신 jquery 1.7을 사용하면 항상 올바른 순서로 사라집니다. jQuery는 애니메이션이 중간에 대기하는 방식을 변경했습니다. jQuery 1.7.2 fiddle