jquery - 메뉴 슬라이드 (stop 미사용 / stop 사용)

- HTML

<ul class="menu">
        <li>학교 소개 매뉴
            <ul class="hide">
                <li>메뉴1-1</li>
                <li>메뉴1-2</li>
                <li>메뉴1-3</li>
                <li>메뉴1-4</li>
                <li>메뉴1-5</li>
                <li>메뉴1-6</li>
            </ul>
        </li>

        <li>시설 소개 매뉴            
            <ul class="hide">
                <li>메뉴2-1</li>
                <li>메뉴2-2</li>
                <li>메뉴2-3</li>
                <li>메뉴2-4</li>
                <li>메뉴2-5</li>
                <li>메뉴2-6</li>
            </ul>
        </li>
    </ul>

 

*stop미사용

$(function(){
    $(".menu>li").mouseover(function(){
        $(this).children().slideDown();
    });
    
------------------------------------------------    

    $(".menu>li").mouseleave(function(){
        $(this).children().slideUp();
    });    
});

================================================

설명
마우스를 여러번 올리고 내리면 그 애니메이션이 마우스가 빠지더라도
횟수만큼 뒤늦게 계속 실행

 

*stop사용

$(function(){
    $(".menu>li").mouseover(function(){
        $(this).children().stop().slideDown();
    });
    
------------------------------------------------ 

    $(".menu>li").mouseleave(function(){
        $(this).children().stop().slideUp();
    });
    
});

================================================

설명
stop() 적용하여 마우스를 올리거나 떠나면 진행중인 애니메이션이 정지됨.