사업부를 애니메이트하는 방법?

-2

누군가 내가 뭘 잘못하고 있는지 신속하게 말해 줄 수 있습니까? 아마도 이것은 아주 간단한 실수 일뿐입니다.사업부를 애니메이트하는 방법?

<!DOCTYPE html> 
<html> 
<head> 
<title>Random Animation Bullshit</title> 
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="animation.css"/> 
</head> 
<body> 
<div id="moving_header"> 
    <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Products</a></li> 
    </ul> 

    <h1>DELL Computers</h1> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#moving_header").mouseover(function() { 
     $("#moving_header").animate({ 
     margin-top: 0px; 
     }, 5000); 
    }); 
}); 
</script> 
</body> 
</html>

div 위로 마우스를 가져 가면 아무런 변화가 없습니다. 나는 그것이 화면의 상단에서 아래로 미끄러지기를 원한다.

업데이트 : 다음은 지금 가지고있는 내용입니다. 아직 작동하지 않습니다 ...

<!DOCTYPE html> 
<html> 
<head> 
<title>Random Animation Bullshit</title> 
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'/> 
<link rel="stylesheet" href="animation.css"/> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
</head> 
<body> 
<div id="moving_header"> 
    <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Products</a></li> 
    </ul> 

    <h1>DELL Computers</h1> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#moving_header").mouseover(function() { 
     $("#moving_header").animate({ 
     marginTop: '0px'; 
     }, 5000); 
    }); 
}); 
</script> 
</body> 
</html>

UPDATE :

#moving_header { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    background: #FF6600; 
    color: white; 
    width: 100%; 
    height: 200px; 
    text-align: center; 
    margin-top: -100px; 
} 

#menu { 
    padding: 0px; 
    margin-top: 40px; 
} 

#menu li { 
    display: inline; 
    margin: 20px; 
} 

#menu li a { 
    text-decoration: none; 
    color: white; 
    font-family: Cutive Mono, sans; 
    font-size: 30px; 
} 

#menu li a:hover { 
    text-decoration: underline; 
} 

#moving_header h1 { 
    font-family: Cutive Mono, sans; 
    font-size: 60px; 
}

출처

2014-12-02 Tommay

당신이 jQuery를 포함나요? – j08691

당신은 페이지에 jquery를 포함하지 않았습니다. – vernak2539

'margin-top : 0px;'뒤에 세미콜론을 없애십시오 - 둘 다 문자열이어야하므로 양쪽 모두'margin-top'과'0px'를 감싸는 것 같습니다. 따옴표로 –

jQuery를이 파일에 있지 않기 때문에이다 : 여기 내 CSS입니다. 다음은 jQuery로 헤더의 수정 된 버전이 추가됩니다 :

<head> 
<title>Random Animation Bullshit</title> 
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="animation.css"/> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
</head>

편집 : 사용이 대신

<head> 
<title>Random Animation Bullshit</title> 
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="animation.css"/> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
</head>

출처

2014-12-02 17:55:46 MikeCastro26

아아, 잊어 버렸어. 그래도 여전히 작동하지 않습니다 ... – Tommay

margin-top : 0px 대신 marginTop : '0px'를 사용해야합니다. 0px – MikeCastro26

아직 아무 것도하지 않습니다. – Tommay

사업부를 애니메이트하는 방법?

답변

관련 문제