JQuery：如何使用事件监听器制作动画？

现在，仅当窗口宽度大于1100 px时才执行此动画，但如果动态调整浏览器大小，则需要刷新浏览器。如何解决这一问题，使浏览器不需要刷新？

命名您的函数，并按如下方式收听调整大小事件：

$(function(){
    if($(window).width()>1100){
        $("#logo").hover(function(){
            $(this).animate({paddingTop:"0px",paddingBottom:"20px"},200);
            },function(){
                $(this).animate({paddingTop:"20px",paddingBottom:"0"},200);
                });
        }
    $(window).resize(function(){
        if($(window).width()>1100){
            $("#logo").hover(function(){
                $(this).animate({paddingTop:"0px",paddingBottom:"20px"},200);
                },function(){
                    $(this).animate({paddingTop:"20px",paddingBottom:"0"},200);
                    });
            }
        });
    });

---

根据窗口大小在resize事件中注册/取消注册处理程序

$(window).on("resize", yourfunction());

---

演示：

当窗口折叠时，动画将成功停用。但当窗口再次展开，重新激活动画时，它会变得非常起伏/滞后。你知道为什么吗？它在小提琴上也落后了。这是我不得不忍受的东西吗？那次调整解决了它。您是一个stud。您将如何更改此脚本以使用视口宽度而不是文档宽度，使其与CSS媒体查询匹配？@oceanic815我以前从未使用过它，请尝试或

$(function () {
    $(window).resize(function () {
        if ($(window).width() > 1100) {
            $("#logo").on('mouseenter.anim', function () {
                $(this).animate({
                    paddingTop: "0px",
                    paddingBottom: "20px"
                }, 200);
            }).on('mouseleave.anim', function () {
                $(this).animate({
                    paddingTop: "20px",
                    paddingBottom: "0"
                }, 200);
            });
        } else {
            $("#logo").off('mouseenter.anim mouseleave.anim');
        }
    }).resize();
});