javascript - 响应式jquery点击功能

Question

我想要特定的宽度、特定的点击动画，但它不起作用。为什么？

举个例子:

从 0 - 959px > anim1 从 960 - 1279px > anim2 从 1280 - 1699 > anim3 从 1700 - open end > anim4

这是我的代码:

$(document).ready(function(){
if ($(window).width() > 959) {
    $("#mains").click(function(){
    anim1();
    });
}
});

$(document).ready(function(){
if ($(window).width() > 1279) {
    $("#mains").click(function(){
    anim2();
    });
}
});

$(document).ready(function(){
if ($(window).width() > 1699) {
    $("#mains").click(function(){
    anim3();
    });
}
});

$(document).ready(function(){
if ($(window).width() < 1700) {
    $("#mains").click(function(){
    anim4();
    });
}
});

Answer 1

您正在根据屏幕尺寸在 $(document).ready() 上绑定(bind)动画。例如，当 DOM 准备就绪且窗口宽度小于 1700 时，将仅使用带有 anim4() 的函数。您需要做的是将窗口宽度检查放在单个绑定(bind)中。 例如:

$(document).ready(function(){
    $("#mains").click(function() {
        if ($(window).width() < 959) {
            // do something
        } else if  ($(window).width() < 1700) {
            // do something else, etc.
        }
    });
});