Question

我有以下jQuery：

var winWidth = 0;
$(window).resize(function() {
    winWidth = $(window).width();
    $(".home").hover(
        function () {
            $(".arrow-down").show();
            if (winWidth < 900) {
                $(".arrow-down").css("left", "70px");  
            }
            else {   
                $(".arrow-down").css("left", "100px");
            }
        },
        function () {
             $(".arrow-down").hide();
        }
    );
});

基本上，只要鼠标悬停在对象arrow-down上，就会显示.home div。但是我也想根据窗口的大小移动arrow-down对象。代码工作正常，只有一个小问题发生，我无法弄清楚原因。如果我刷新屏幕，当鼠标悬停在对象arrow-down上时，.home div不显示，但如果我调整屏幕大小，则该功能可以正常工作。

我猜测该功能仅在屏幕调整大小时调用，但我不想这样，我希望在调整屏幕大小之前调用该函数。

如何解决这个问题？

Answer 1

你是对的，你的功能只在调整大小时调用 - 刷新或加载页面不会触发它。要在两者上触发您的功能，请更改：

$(window).resize(function() { /* your code here */ });

为：

$(window).on("load resize", function() { /* your code here */ });

See jQuery $.on for more info.

Answer 2

您的函数被jquery调用$(window).resize包围。只有在调整窗口大小时才会调用此函数。尝试在$(".home").hover调用之外移动$(window).resize调用，并仅在调整窗口大小时更新变量winWidth。

类似的东西：

var winWidth = $(window).width();

$(window).resize(function() {
    winWidth = $(window).width();
});

$(".home").hover(
    function () {
        $(".arrow-down").show();
        if (winWidth < 900) {
            $(".arrow-down").css("left", "70px");  
        }
        else {   
            $(".arrow-down").css("left", "100px");
        }
    },
    function () {
        $(".arrow-down").hide();
    }
);

或者像Damion Yeatman说你甚至不必声明变量winWidth，只需要在需要获得窗口宽度时使用$(window).width();函数。

Answer 3

当你在悬停时运行一个函数时，你不应该检查窗口的大小调整。

$(".home").hover(
    function () {
        $(".arrow-down").show();
        if ($(window).width() < 900) {
            $(".arrow-down").css("left", "70px");  
        }
        else {   
            $(".arrow-down").css("left", "100px");
        }
    },
    function () {
         $(".arrow-down").hide();
    }
);

希望这有帮助。

窗口调整大小的JQuery悬停问题

3 个答案: