2012-03-27 4 views
0

멋진 jQuery 배너 광고를 만들려고합니다. 내 콘텐츠의 스타일은 다음과 같습니다.jQuery fadeOut이 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Open House : Banner Advertisements</title> 
       <style type="text/css"> 

       article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;} 

         body { background:#0D3405; } 
#container 
{ 
background:#000; 
width:895px; 
margin:25px auto; 
border:solid 2px #666; 
color:#eee; 
padding:15px; 
min-height:600px; 
} 
.leaderboard 
{ 
    width: 895px; 
    min-height:150px; 
    max-height:150px; 
    background: #FFFFFF; //url('_images/01Slide_600x300.jpg') no-repeat; 
    overflow:hidden; 
    position:relative; 
    top:20px; 
} 
.skyscraper 
{ 
width: 150px; 
min-height:600px; 
background:#FFFFFF; 
position:fixed; 
margin-left:5px; 
overflow:hidden; 
} 

#tiger 
{ 
margin-left:-160px; 

} 

#banner1 img 
{ 
position:relative; 
height:100px; 
margin-top:150px; 
margin-right:180px; 
} 

      </style> 

<script type="text/javascript" src="_scripts/modernizr.min.js"></script> 
    </head> 
    <body> 
<div id = "banner2" class = "skyscraper"> 
<img id = "tiger" src = "_images/tiger_2.png" alt = "_images/saveTiger.jpg"> 
</div> 

<div id = "container"> 
    <div id = "banner1" class = "leaderboard"> 
    <h1>free smartphones</h1> 
    <img id = "android1" src = "_images/android.png"> 
    <img id = "android2" src = "_images/blackberry.png"> 
    <img id = "android" src = "_images/android2.png"> 
    </div> </br> 
    </div> 

</body> 

<script type = "text/javascript" src = "_scripts/jquery.min.js"></script> 
<script type = "text/javascript" charset = "utf-8"> 
$(document).ready(function() { 
saveTheTiger(); 
}) 

function saveTheTiger() 
{ 
    $('#tiger').fadeOut(1000); 
//animate({'margin-left':'100px'},1000); 
} 

function banner1adsequence() 
{ 
    smartphones(); 
} 
</script> 
</html> 

사실, fadeOut이 작동하지 않습니다. 주석 처리 된 애니메이션 기능을 알게되면 작동합니다. 드라이브를 테스트하고 ID가 호출되고 작동하는지 확인해야합니다.

여기에 무엇이 있는지 정확히 알 수 있습니까?

감사

+5

나를위한 작품 : http://jsfiddle.net/6Q49q/ –

+2

CSS 규칙에 따라 이미지가 화면에 표시되지 않았습니까? 이 경우 "작동하지 않는"것은 무엇을 의미합니까? 이미지가 전혀 표시되지 않거나 페이드 아웃되지 않습니까? 오류? – JJJ

+0

'fadeIn'은 우연히 작동합니까? 어떤 브라우저/버전에서 실행 하시겠습니까? –

답변

1

귀하의 문제는 CSS 그 #tiger 장소 화면 오프 img-160px입니다. .skyscraber 클래스는 너비가 150px이므로 img은 화면 외부에 10px이됩니다.

animate에서 "여백"을 수정하면 효과가있는 것입니다.

+0

오류가 아니며 의도적으로 이미지가 위치에 지정되는 방식입니다. – user1020069

+1

폭 150px의 상자를 표시하고 화면의 왼쪽에 160px 위치를 지정하는 데 도움이됩니다. "animate"방법에서 "margin-left"속성을 제거하려고하면 같은 오류가 발생합니다 페이드 아웃 방법으로 –

+0

남자들은 margin-left가 간단하기 때문에 뷰포트의 크기 (마천루)에 특정 방식으로 이미지를 배치 할 수 있습니다. 나는 여백을 남겼다. 그리고 fadeout은 작동하지 않는다 ..... 나는 이미지 대신에 h1 태그를 넣음으로써 이것을 테스트했다. 그리고 그것은 괜찮아졌다. ... – user1020069

관련 문제