第二个 Javascript 函数抛出一切

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 函数抛出一切

Second Javascript function throws everything off

javascript

jquery