使用媒体查询停止jQuery操作

大家好，我有一个简单的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媒体查询来实现这一点

这是我的

提前谢谢你

这对我很有用：

if($(window).width() > 320) {
    $("#logo-expand").mouseenter(function() {
        $(this).animate({
            width: "170px"
        }, 300 );
    });

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

请看这里：

---

为了获得最佳结果，您可能希望将其放入一个函数中，并在调整窗口大小时调用它

您可以使用

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 );
}
});

}); 

---

不使用媒体查询，因为我不确定这是否可能，但我希望这能有所帮助

它有效地检查窗口大小，然后运行动画或不运行动画

$("#logo-expand").mouseenter(function() {
  if($(window).width() > 100){  
    $(this).animate({
        width: "170px"
    }, 300 );
  } else {
    $(this).css({'width':"170px"});                               
  }
});

$("#logo-expand").mouseleave(function() {
if($(window).width() > 100){ 
    $(this).animate({
              width: "56px"
        }, 300 );
    } else {
       $(this).css({'width':"56px"});                               
    }
});

---

抱歉，如果我不明白您是否仍然希望应用CSS样式