jquery - 使用媒体查询停止 jQuery 动画

Question

大家好，我有这个简单的 jquery 动画

    $(window).load(function() {

        //Top Header Logo Expand
$("#logo-expand").mouseenter(function() {
    $(this).animate({
        width: "170px"
    }, 300 );
});

$("#logo-expand").mouseleave(function() {
    $(this).animate({
        width: "56px"
    }, 300 );
});

    }); 

现在我想在手机分辨率下禁用动画，我该如何使用 jquery 媒体查询来做到这一点，有什么想法吗？

这是我的 http://jsfiddle.net/MyKnB/5/

提前谢谢

Answer 1

您可以使用window.innerWidth来确定屏幕的宽度，并且仅在大于特定宽度时才执行动画

$(window).load(function() {
if (window.innerWidth > 700){
    //Top Header Logo Expand
$("#logo-expand").mouseenter(function() {
$(this).animate({
    width: "170px"
}, 300 );
});

$("#logo-expand").mouseleave(function() {
$(this).animate({
    width: "56px"
}, 300 );
}
});

});