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

}); 

Answer 2

这对我有用：

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

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

见这里：http: //jsfiddle.net/MyKnB/7/

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

Answer 3

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

有效地检查窗口大小，然后运行动画与否

$("#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"});                               
    }
});