2012-03-27 13 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

を持っている人は、マージン左は、ビューポートの次元[超高層ビル]で特定の方法でイメージを配置できるようにするだけです。私は余白を取り除いたままにしてしまい、フェードアウトはうまくいきません.....画像の代わりにh1タグを入れてテストしましたが、それはうまくフェードアウトします。 – user1020069

関連する問題