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

Avatar of undefined
Last Comment
prothera

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
hankknight

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
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.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck