Question

嘿，我只有一个简单的javascript代码，其中我在页面加载时动画元素出现在页面上。动画片段的一切都很好。但是，当我尝试添加第二个javascript命令，当我将鼠标悬停在图像上时，没有其他工作。我绝对肯定这与我输入代码的方式有关。有人可以帮我修复我的代码吗？

var main = function() {
    {
        $(".menu").animate({
            "top": "0px"
        }, 400);
    };

    {
        $(".about h2").animate({
            "right": "0px"
        }, 500);

    }; {
        $(".about p").animate({
            "bottom": "0px"
        }, 580);

    }; {
        $(".resume").animate({
            "bottom": "0px"
        }, 650);

    }; {
        $("#image img").animate({
            "right": "0px"
        }, 600);

    };
    $("#image img").hover(function() {
        $(this).css({
            "background-color:"
            "rgba(0,0,0,0.5)"
        });
    });


}

$(document).ready(main);

Answer 1

此语法不正确：

    $(this).css({
        "background-color:"
        "rgba(0,0,0,0.5)"
    });

这只是两个字符串，没有以任何方式分开，因此不是有效的对象。正确的语法是propertyName : "value"，因此您的代码应该是

    $(this).css({
        backgroundColor: "rgba(0,0,0,0.5)"
    });

See the docs了解更多信息。

此外，正如其他人所指出的那样，您不需要所有{...}块。您的代码可以简化为：

var main = function() {
        $(".menu").animate({
            "top": "0px"
        }, 400);
    };

$(".about h2").animate({
    "right": "0px"
}, 500);

$(".about p").animate({
    "bottom": "0px"
}, 580);

$(".resume").animate({
    "bottom": "0px"
}, 650);

$("#image img").animate({
    "right": "0px"
}, 600);

$("#image img").hover(function() {
    $(this).css({
        backgroundColor: "rgba(0,0,0,0.5)"
    });
});

$(document).ready(main);

第二个Javascript函数抛出一切

1 个答案: