jquery의 호버가 취소된 후 실행됩니다.

웹 디자인에서는 JavaScript 라이브러리의 jQuery를 사용하여 다양한 효과를 얻는 경우가 많습니다. 그 중 호버(hover) 이벤트는 자주 사용되는 이벤트로, 마우스를 호버링할 때 특수한 효과를 구현할 수 있다. 그러나 특정 특수 효과를 구현할 때 호버 이벤트에서 이전 작업을 취소한 다음 새 작업을 수행해야 합니다. 그렇다면 jQuery에서 hover를 취소하고 실행하는 방법은 무엇입니까?

1. 호버 이벤트의 기본 사용법

jQuery에서는 다음 코드만 사용하면 됩니다.

$('selector').hover(function() {
  // 如果想要执行的操作
}, function() {
  // 如果想要取消的操作
});

그 중 선택자는 호버 이벤트가 바인딩되는 요소를 나타내며, 첫 번째 함수는 마우스를 요소 위로 가져갈 때 수행할 작업을 나타내고, 두 번째 함수는 마우스를 요소 밖으로 이동할 때 수행할 작업을 나타냅니다.

2. hover 취소 후 실행

때로는 hover 이벤트에서 이전 작업을 취소하고 나중에 새로운 작업을 수행해야 하는 경우도 있습니다. 일반적인 시나리오는 사용자가 마우스를 빠르게 움직일 때 이전 작업을 취소한 다음 새 작업을 수행해야 하는 것입니다. 이때 jQuery의 stop() 및 Delay() 메소드를 사용하여 이를 달성할 수 있습니다.

stop() 메서드는 현재 진행 중인 애니메이션이나 효과를 중지하는 데 사용되며, Delay() 메서드는 작업 실행을 지연하는 데 사용됩니다. 이 두 메서드를 조합하면 작업이 완료된 후 작업을 실행하는 효과를 얻을 수 있습니다. 호버링이 취소됩니다.

다음은 코드 예입니다.

var timeoutId;
$('selector').hover(function() {
  // 如果想要执行的操作
  $(this).stop().animate({ width: '100px' }, 500);
  clearTimeout(timeoutId);
}, function() {
  // 如果想要取消的操作
  timeoutId = setTimeout(function() {
    $(this).stop().animate({ width: '50px' }, 500);
  }, 500);
});

이 코드에서는 timeoutId 변수를 사용하여 타이머의 ID를 저장합니다. 마우스가 요소 밖으로 이동할 때 500ms 후에 축소 작업을 수행하도록 타이머를 설정합니다. 이 시간 동안 다시 마우스가 해당 요소에 들어가면 타이머가 지워지고 확대/축소 작업이 수행됩니다.

3. 요약

Hover 이벤트 취소 및 재실행을 jQuery에서 구현하려면 stop() 및 Delay() 메소드를 조합하여 사용해야 합니다. 이렇게 하면 이전 작업이 정상적으로 취소될 수 있습니다. 마우스가 빠르게 움직이며 나중에는 새로운 작업을 수행합니다. 이 방법은 웹 디자인에서 매우 일반적이며 더 많은 축적과 연습이 필요합니다.

위 내용은 jquery의 호버가 취소된 후 실행됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!