휴대 전화가 아닌 장치에만 jQuery 애니메이션 사용

Question

나는이 사이트를 클라이언트 용으로 작성하여 업로드했습니다 (here). 트위터 부트 스트랩을 사용하여 사용자 정의했습니다. 내 문제는 jquery가 링크를 움직이게하는 네비게이션이다. 그러나 나는 이것을 비활성화하고 화면 크기가 전화 크기로 떨어지면 수직 목록으로 되돌리기를 원합니다.

부트 스트랩에는 이미 미디어 쿼리가 내장되어 있지만이 작업은 어떻게 수행되는지 알고 있습니다.

사이트를 확인하고 브라우저를 모바일 크기로 축소하면 목록 버튼이 표시되지만 링크가 여전히 동일하게 표시됩니다.

내 의견을 매우 명확하게 작성했는지는 모르지만 더 자세한 정보는 문의하십시오.

$(document).ready(function() { 

    //When mouse rolls over 
    $(".blue").mouseover(function() { 
    $(this).stop().animate({ 
     height: '100px' 
    }, { 
     queue: false, 
     duration: 1200, 
     easing: 'easeOutBounce' 
    }) 
    }); 

    //When mouse is removed 
    $(".blue").mouseout(function() { 
    $(this).stop().animate({ 
     height: '50px' 
    }, { 
     queue: false, 
     duration: 1200, 
     easing: 'easeOutBounce' 
    }) 
    }); 
}); 

Answer 1

단지 작은 뷰포트에서 애니메이션을 적용 할 matchMedia()을 시도해보십시오 :

덕분에 여기

애니메이션의 코드 책임

은 물론

if (window.matchMedia("(max-width: 480px)").matches) { 
    /* do animation here */ 
} 

당신이 480px을 변경할 수 있습니다 어떤 너는 또는 check for other properties을 원한다.