JQuery：如何使用事件监听器进行动画？

Question

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

目前，此动画仅在窗口宽度大于1100像素时执行，但如果浏览器动态调整大小，则需要刷新浏览器。如何解决这个问题，以便不需要浏览器刷新？

Answer 1

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

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

演示：Fiddle

Answer 2

命名你的函数，并像这样收听resize事件：

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