두 번째 자바 스크립트 함수는 모든 것을 내 보냅니다.

Question

안녕하세요 저는 페이지가로드 될 때 페이지에 표시되는 요소에 애니메이션을 적용하는 간단한 자바 스크립트 코드 만 가지고 있습니다. 애니메이션 세그먼트는 모든 것이 좋습니다. 그러나 이미지 위에 마우스를 올리면 다른 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);