호버 애니메이션을 궁극적으로 사라지게하는 방법

호버 위에 올려 놓을 때 이미지 상단에 정보를 표시하는 이미지 호버 용 코드가 있습니다. 콜백에서 queue : false를 사용하여 사용자가 여러 번 가리키면 애니메이션이 계속 실행되는 것을 중단했습니다.호버 애니메이션을 궁극적으로 사라지게하는 방법

마우스 오버로 미친 듯이 들리면 호버 (hover) 상태에서 페이드 인/페이 아웃하면 호버 이미지가 더 이상 보이지 않을 때까지 정보의 불투명도가 감소합니다.

$('.image').hover(function() { 
    $('.linkWords', this).animate({ 
     opacity: "show" 
    }, { 
     queue: false 
    }); 
}, function() { 
    $('.linkWords', this).animate({ 
     opacity: "hide" 
    }, { 
     queue: false 
    }); 
});

놀고 싶다면 여기가 내 jsfiddle입니다.

http://jsfiddle.net/bkbarton/qrprD/

감사

출처

2011-09-08 bkbarton

다음 애니메이션을 시작하기 전에 요소에 .stop(true)을보십시오. 진행중인 애니메이션이 정지됩니다.

출처

2011-09-08 17:28:15 Wulf

Wulf - .stop (true)를 .hover() 함수의 첫 번째 .animate 또는 두 번째에 배치하도록 제안 하시겠습니까? 나는 둘 다 시도하고 그들은 나의 문제점을 해결하지 않았다. 사용자가 두 호버 영역 사이를 지속적으로 신속하게 이동하면 마우스 오버 이미지가 여전히 보이지 않게됩니다. – bkbarton

조금 더 조사를 한 후에 나는 당신이 옳았다는 것을 발견했습니다. 추가로 true를 추가하면 효과가 제대로 작동합니다. .stop (true, true) ... – bkbarton

맞습니다. 첫 번째 true는 현재 실행중인 애니메이션을 중지하고 두 번째 true는 최종 상태로 만듭니다. 내 애니메이션의 경우 대부분 멈추게하는 것이 좋지만 사용하지 않는 경우 두 번째 매개 변수는 없습니다.) 도움이된다면 제 대답을 수락하십시오. – Wulf

"표시하지 않음"으로 불투명도를 1로 보냅니다. "Show"는 현재 최대 불투명도를 페이드 할 불투명도로 사용할 수 있습니다. 따라서 페이드 아웃 상태 였고 현재 불투명도가 .5이면 .5로 페이드 인하여 표시됩니다.

$('.image').hover(function() { 
    $('.linkWords', this).animate({ 
     opacity: 1 
    }, { 
     queue: false 
    }); 
}, function() { 
    $('.linkWords', this).animate({ 
     opacity: "hide" 
    }, { 
     queue: false 
    }); 
});

출처

2011-09-08 18:18:48 smdrager

호버 애니메이션을 궁극적으로 사라지게하는 방법

답변

관련 문제