Question

尝试制作精美的jQuery横幅广告。我的内容样式如下：

<!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不起作用。如果您注意到已注释掉的animate函数，那确实有效，我只是在那里测试驱动器并检查是否正在调用id并且确实有效。

任何人都可以查明这里的内容吗？

由于

Answer 1

您的问题是，您的CSS #tiger会将img -160px从屏幕上移开。由于课程.skyscraber的宽度仅为150px，因此img将在屏幕外10px。

在您的animate中，您更正了保证金“错误”，这就是它有效的原因。

jQuery fadeOut不起作用

1 个答案: