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

使用媒体查询停止jQuery动画

3 个答案: