Soar working IE8 intro

HTML

<script src="http://dev.thepixellary.es/jquery.backgroundPosition.js"></script>
    <div id="wrapper">
        <div class="logo"><img src="img/logo_intro.png" alt="logo" /></div> 
        <div id="stars">
            <div class="star1"><img src="img/star1.png" alt="stars" /></div> 
            <div class="star2"><img src="img/star2.png" alt="stars" /></div> 
            <div class="star3"><img src="img/star3.png" alt="stars" /></div> 
            <div class="star4"><img src="img/star4.png" alt="stars" /></div> 
            <div class="star5"><img src="img/star5.png" alt="stars" /></div> 
        </div>
        <ul class="menu"> 
            <li><a href="#">About</a></li> 
            <li><a href="#">About</a></li> 
            <li><a href="#">About</a></li> 
            <li><a href="#">About</a></li> 
        </ul> 
    </div>

CSS

body { background: #FFFFFF; font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; font-size:12px; }
        #wrapper { width: 1000px; margin: 0 auto; position:relative; background: url('http://dev.thepixellary.es/starry_sky.jpg') no-repeat left center; height: 710px; margin-top: -50px;}

        ul { list-style: none; }
        .menu { position:absolute; top:240px; }
        .menu li { display: none; color: #FFFFFF; padding: 10px; }
        .menu li a { color: #FFFFFF; text-decoration: none; }
        .menu li a:hover { color: #95D5FE; }
        div.logo { position:absolute; display:none; top:325px; right:100px;  }
        div.star1 { position:absolute; display:none; top:313px; right:187px; }
        div.star2 { position:absolute; display:none; top:310px; right:164px; }
        div.star3 { position:absolute; display:none; top:304px; right:143px; }
        div.star4 { position:absolute; display:none; top:295px; right:120px; }
        div.star5 { position:absolute; display:none; top:285px; right:100px; }

JavaScript

$(function(){
    //$("#wrapper").animate({ backgroundPosition: '-261px 50px' }, 12000 );
    $.fn.scrollingBackground = function(options) {
  
       // settings and defaults.
        var settings = options || {};
        var duration = settings.duration|| 1;
        var step = settings.step || 1;
        
        var element = this;
        
        // perform the animation forever:
        var animate = function() {
            element.css("background-position", "0px 0px");
            element.animate({
                backgroundPosition: step + "px 0px"
            }, duration);            
        };
        animate();
    };
 
  $("#wrapper").scrollingBackground({
    duration: 12000,
    step: -261});
    
    $(".menu li").each(function(idx) {
      $(this).delay(idx * 1000).fadeIn("slow");
    });
   
    $('.logo').fadeTo(5000 , 1,function() {
        $('.star1').fadeTo(2000 , 1 ,function() {
            $('.star2').fadeTo(2000 , 1,function() {
                $('.star3').fadeTo(2000 , 1,function() {
                    $('.star4').fadeTo(2000 , 1,function() {
                        $('.star5').fadeTo(2000 , 1,function() {
                            //window.location.href = "about/index.html"; 
                        });         
                    });         
                });         
            });        
        });        
    });         
    
});