Link to home
Start Free TrialLog in
Avatar of prothera
prothera

asked on

jQuery automatic slideshow jumps

I have a jQuery example that I am trying and it's not quite right. The images are automatically going to the next one, but when the next image is fading in, it pushes the previous image down instead of them fading in/out on top of each other.

'*** CODE ****
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="JQuerySlideShow2.aspx.vb" Inherits="test_JQuerySlideShow2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

  <style type="text/javascript">
    #slideshow {
                margin: 80px auto;
                position: relative;
                width: 240px;
                height: 240px;
                padding: 10px;
                box-shadow: 0 0 20px rgba(0,0,0,0.4);
            }
            
            #slideshow > div {
                position: absolute;
                top: 10px;
                left: 10px;
                right: 10px;
                bottom: 10px;
            }
  </style>
 
  <script src="../scripts/jquery-1.8.3.min.js" type="text/javascript"></script>

  <script type="text/javascript">
            $(document).ready(function() {
            
                  $("#slideshow > div:gt(0)").hide();
      
                  setInterval(function() {
                    $('#slideshow > div:first')
                      .fadeOut(1000)
                      .next()
                      .fadeIn(1000)
                      .end()
                      .appendTo('#slideshow');
                  },  3000);
                  
            });
  </script>
 
</head>

<body>
    <form id="form1" runat="server">
   
    <div id="slideshow">
      <div>
        <img src="img/img_slide_01.jpg" />
      </div>
     
      <div>
        <img src="img/img_slide_02.jpg" />
      </div>

      <div>
        Pretty cool eh; This slide is proof the content can change.
      </div>
    </div>
   
    </form>
</body>
</html>
ASKER CERTIFIED SOLUTION
Avatar of hankknight
hankknight
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of prothera
prothera

ASKER

That's awesome! I thought it was something silly like that. Thanks a million. You're talking about the first occurrence of that.