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
<!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
<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>
'*** CODE ****
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="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
<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>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 2 Comments.
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.