Прыжки между переходами изображений с помощью jQuery

Question

Я добавил несколько изображений на мою страницу, чтобы исчезнуть, но между переходами есть переход. Помощь очень ценится.

Когда я добавляю:

• position: absolute; в #carousel, изображения поплавки влево, страница тела перемещается вверх и содержание становится невидимым.
• position: absolute; до .images {}, страница движется вверх и содержимое становится невидимым.
• position: absolute;#carousel и .images {}, хотя прыжки исчезают, изображения плавают влево, тело страницы движется вверх, а содержимое становится невидимым.

Благодаря

http://jsfiddle.net/Zvn82/

JS

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function() 
      { 
       var showing_default = true; 
       var did_scroll = false; 

       $(window).on("scroll", function (e) 
       { 
        did_scroll = true; 
       }); 

       window.setInterval(function() 
       { 
        if (did_scroll) 
        { 
         did_scroll = false; 

         if (showing_default && $(document).scrollTop() >= 100) 
         { 
          showing_default = false; 
          $("#header_container").css('position', 'fixed'); 
          $("#default").stop().hide(); 
          $("#sticky").fadeIn(500); 
         } 
         else if (! showing_default && $(document).scrollTop() < 100) 
         { 
          showing_default = true; 
          $("#sticky").stop().hide(); 
          $("#default").fadeIn(500); 
          $("#header_container").css('position', 'fixed'); 
         } 
        } 
       }, 250); 
      }); 

      $(document).ready(function() 
      { 
       var timeout_id; 

       var slide_image = function(step) 
       { 
        if (step == undefined) step = 1; 

        clearTimeout(timeout_id); 

        var indx = $('.image:visible').index('.image'); 

        if (step != 0) 
        { 
         $('.image:visible').fadeOut(); 
        } 

        indx = indx + step; 

        if (indx >= $('.image').length) 
        { 
         indx = 0; 
        } 
        else if (indx < 0) 
        { 
         indx = $('.image').length - 1; 
        } 

        if (step != 0) 
        { 
         $('.image:eq(' + indx + ')').fadeIn(); 
        } 

        timeout_id = setTimeout(slide_image, 1000); 
       }; 

       slide_image(0); 
      }); 
     </script> 

CSS

<style type="text/css"> 
      /* --- COMMON ---------------------------------------------- */ 
      * 
      { 
       margin: 0px; 
       padding: 0px; 
      } 
      /* --- HEADER ---------------------------------------------- */ 
      #header_container 
      { 
       display: block; 
       z-index: 100; 
       position: fixed; 
       top: 0px; 
       width: 100%; 
       background: #EEEEEE; 
       -moz-box-shadow: 0 -2px 5px 5px #B8B8B8; 
       -webkit-box-shadow: 0 -2px 5px 5px #B8B8B8; 
       box-shadow: 0 -2px 5px 5px #B8B8B8; 
      } 
      #default 
      { 
       display: block; 
       margin: auto; 
       width: 900px; 
       height: 100px; 
      } 
      #sticky 
      { 
       display: none; 
       margin: auto; 
       width: 900px; 
       height: 50px; 
      } 
      /* --- CAROUSEL -------------------------------------------- */ 
      #carousel_container 
      { 
       display: block; 
       margin-top: 105px; 
       width: 100%; 
       background: #FFFFFF; 
      } 
      #carousel 
      { 
       display: block; 
       margin: auto; 
       width: 900px; 
      } 
      .image 
      { 
       display: none; 
       width: 900px; 
       height: 400px; 
      } 
      .first 
      { 
       display: block; 
      } 
      /* --- BODY ------------------------------------------------ */ 
      #body_container 
      { 
       display: block; 
       background: #EEEEEE; 
      } 
      #body 
      { 
       display: block; 
       margin: auto; 
       width: 900px; 
      } 
      /* --- FOOTER ---------------------------------------------- */ 
      #footer_container 
      { 
       display: block; 
       background: #DBDBDB; 
      } 
      #footer 
      { 
       display: block; 
       margin: auto; 
       width: 900px; 
      } 
     </style> 

HTML

DEFAULT HEADER STICKY HEADER

<div id="carousel_container"> 
     <div id="carousel"> 
      <div class="image first"><img src="images/1.jpg" width="900px" height="400px" alt="" /></div> 
      <div class="image"><img src="images/2.jpg" width="900px" height="400px" alt="" /></div> 
      <div class="image"><img src="images/3.jpg" width="900px" height="400px" alt="" /></div> 
      <div class="image"><img src="images/4.jpg" width="900px" height="400px" alt="" /></div> 
      <div class="image"><img src="images/5.jpg" width="900px" height="400px" alt="" /></div> 
     </div> 
    </div> 

    <div id="body_container"> 
     <div id="body"> 
      TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM 
     </div> 
    </div> 

    <div id="footer_container"> 
     <div id="footer">FOOTER</div> 
    </div> 

Answer 1

Добавить в CSS

#carousel{ 
    height:400px; 
} 

.image 
{ 
    position: absolute; 
}