jquery가hover에 있을 때 show,hide에speed를 증가하여 빠르게 이동하는 떨림 문제를 발생시킵니다

문제.
개발 과정에서 마우스hover가 필요할 때 내용을 숨기고 표시하는 수요가 자주 발생하는데 자주 사용하는 방식은 jquery의hover 이벤트를 통해 show/hide와 함께 실현하는 것이다. 구체적인 코드는 다음과 같다. html:

    

        
  1
    

    

        
  2
    
    

        
  3
    

js:

 $(function () {
    $('ul li').hover(function () {
        $(this).children().show()
    }, function () {
        $('p').hide()
    })
})

이렇게 실현하는 것은 문제없지만 너무 딱딱하고 display: block|none 방식으로만 숨겨서 보여줄 뿐 체험할 만한 것이 없기 때문에 개선해 보겠습니다. js는 다음과 같습니다.

$(function () {
    $('ul li').hover(function () {
        $(this).children().show(500) //   speed 500ms
    }, function () {
        $('p').hide(300) //  speed 300ms
    })
})

응응, 됐어. 표시할 때 애니메이션이 추가되어 딱딱하지 않아. 그런데 문제가 생겼어. 마우스를 빠르게 옮기고 옮길 때 마우스가 운동을 멈췄어도 애니메이션이 멈추지 않았어. 마우스를 옮기는 횟수에 따라 실행해야 멈출 수 있어. 이건 좀 어색해. 해결해야 돼.
해결책
이입 이출에 시간 지연이 있는 이상 시간 지연을 추가하여 이입을 할 때 실행할 것을 판단할 수 있다. 만약에 애니메이션 과정을 이미 실행하고 있다면 show,hide는 같은 이치를 실행하지 않지만 실패했다.그럼 다른 것도 볼게요. hover는 안 돼요. 그럼 mouseenter/mouseout 이벤트를 사용하세요. 그런데 효과는 똑같아요.자세히 생각해 보면 스피드가 추가된 후에 매번 이입하고 이동할 때마다 숨겨진/표시된 애니메이션을 애니메이션의 대기열에 추가했기 때문에 빠르게 진행할 때 마우스가 멈추더라도 대기열의 이벤트가 아직 끝나지 않았기 때문에 현재 횟수에 따라 완성될 때까지 계속 실행할 것이다.그렇다면 기왕 이렇게 된 이상 jq는 반드시 자신의 방식으로 처리해야 한다. 그렇지 않으면 이렇게 모두가 참거나 여러 가지 방법을 생각해서 해결할 수 없다. 과연 다시 검색해 보니 jq가 이미 stop 방법을 제공했구나.stop 이 방법의 용도는 애니메이션이나 효과를 멈추기 전에 사용하는 것이다.이것은 두 개의 매개 변수를 받아들인다. stopAll: 애니메이션 대기열을 지워야 하는지 여부를 규정합니다.기본값은false입니다. 즉, 활동하는 애니메이션만 정지하고, 대기열에 배열된 애니메이션은 뒤로 실행할 수 있습니다.goToEnd: 현재 애니메이션을 즉시 완성할지 여부를 규정합니다. 기본값은false입니다.기본적으로 stop () 은 선택한 요소에 지정된 현재 애니메이션을 지웁니다.js 수정은 다음과 같습니다.

$(function () {
    $('ul li').hover(function () {
        $(this).children().stop(false, true).show(500)
    }, function () {
        $('p').stop(false, true).hide(300)
    })
})

응응, 문제가 해결되어 즐겁게 드나들 수 있어.보아하니 jq를 너무 적게 썼구나,api에도 익숙하지 않구나,앞으로 강화해 보자,히히.