CODEWITHSUNDEEP
javascriptjquery
user1020069
user1020069

Reputation: 1570

jQuery fadeOut does not work

trying to create a fancy jQuery banner ad. My content is styled like this:

<!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>

The thing is, the fadeOut does not work. if you notice the animate function that has been commented out, that does work, which I just put out there to test drive and check if the id is being called and that does work.

Can anyone pinpoint what's up here?

Thanks

Upvotes: 0

Views: 413

Answers (1)

Rudi Hansen
Rudi Hansen

Reputation: 124

Your problem is that your CSS #tiger places the img -160px off the screen. Since the class .skyscraber is only 150px in width the img will be 10px outside the screen.

In your animate you correct the margin "error" and that is why it works.

Upvotes: 1

Related Questions