ファンシーな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が呼び出されているかどうかを確認して動作するかどうかを確認するために配置します。
誰でもここにあるものを特定できますか?
おかげ
私のために働きます:http://jsfiddle.net/6Q49q/ –
CSSルールが画像をスクリーンの外に置くためではありませんか?とにかくこの場合、「うまくいかない」とはどういう意味ですか?画像がまったく表示されない、またはフェードアウトしないエラー? – JJJ
万が一 'fadeIn'は動作しますか?どのブラウザ/バージョンでこれを実行しようとしていますか? –