Втората функция на Javascript изхвърля всичко - javascript, jquery

Хей, просто имам прост код на 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);

Отговори:

Този синтаксис е неправилен:

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

Това са само два низа, които не са разделени по никакъв начин и следователно не са валиден обект. Правилният синтаксис е propertyName : "value", така че вашият код трябва да бъде

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

Вижте документите за повече информация.

Освен това, както други са посочили, нямате нужда от всички тези {...} блокове. Вашият код може да бъде опростен до това:

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);