Help with fadeout/fadein for four divs in jquery
I have four div elements that are under a parent div. These divs are filled with data that were in a PHP file. I got the data through the jQuery's .getJSON(). Anyways, I need to fadeIn()/fade开发者_如何学运维Out() these divs in a certain order. Here is what I have.
$("#images #image1").fadeOut(2000); //do this first
$("#images #image2").fadeIn(2000);
$("#images #image2").fadeOut(2000); //then this
$("#images #image3").fadeIn(2000);
$("#images #image3").fadeOut(2000); //then this
$("#images #image4").fadeIn(2000);
$("#images #image4").fadeOut(2000); //then this
$("#images #image1").fadeIn(2000); //then this
Here is my index.php file that contains jquery and css if that helps!
<style type="text/css">
#container {
width:320px;
position:relative;
height:60px;
overflow:hidden;
}
#images {
height:60px;
width:320px;
}
#images #image1 {
float:left;
}
#images #image2 {
float:left;
display:none;
}
#images #image3 {
float:left;
display:none;
}
#images #image4 {
float:left;
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2 /jquery.js"></script>
<script type="text/javascript" src="https://raw.github.com/malsup/cycle/master/jquery.cycle.all.js"></script>
<script type="text/javascript">
//this function will display images from the database
//path is the name of the image
//images is the directory where the images are stored
$("document").ready(function () {
$.getJSON('slide.php', function (data) {
//alert("Data loaded");
$.each(data, function (i, item) {
$("#images").append('<div class="imageone" id="image1"><img src="images/' + item.path + '" width="80px" height="60px"/>' + '</div>');
});
});
$.getJSON('f_steptwo.php', function (data) {
$.each(data, function (i, item) {
$("#images").append('<div class="imagetwo" id="image2"><img src="images/' + item.path + '" width="80" height="60"/>' + '</div>');
});
});
$.getJSON('f_stepthree.php', function (data) {
$.each(data, function (i, item) {
$("#images").append('<div class="imagethree" id="image3"><img src="images/' + item.path + '" width="80" height="60"/>' + '</div>');
});
});
$.getJSON('f_stepfour.php', function (data) {
$.each(data, function (i, item) {
$("#images").append('<div class="imagefour" id="image4"><img src="images/' + item.path + '" width="80" height="60"/>' + '</div>');
});
$("#images #image1").fadeOut(2000);
$("#images #image2").fadeIn(2000);
$("#images #image2").fadeOut(2000);
$("#images #image3").fadeIn(2000);
$("#images #image3").fadeOut(2000);
$("#images #image4").fadeIn(2000);
$("#images #image4").fadeOut(2000);
$("#images #image1").fadeIn(2000);
});
});
</script>
</head>
<body>
<div id="container">
<div id="images">
</div>
</div>
And then this entire process need to repeat itself every three seconds or so. Any would be greatly appreciated. This needs to happen when the page loads.
If you don't want an action to take place until the previous one has finished, you can put it in a callback, for your above referenced code it would look like this:
$("#image1").fadeIn(2000); //do this first
$("#image2").fadeOut(2000, function () {
$("#image2").fadeOut(2000); //then this
$("#image3").fadeIn(2000, function () {
$("#image3").fadeOut(2000); //then this
$("#image4").fadeIn(2000, function () {
$("#image4").fadeOut(2000, function () { //then this
$("#image1").fadeIn(2000); //then this
});
});
});
});
Since you want the action to repeat many times putting them in callback would be insane, something like this would be better suited:
var elements = ["#image1", "#image2", "#image3", "#image4"];
$(elements.join(',')).hide();
$(elements[0]).show();
var currentElement = 0,
nextElement = function () {
$(elements[currentElement]).fadeOut(2000);
currentElement++;
if (currentElement === elements.length) {
currentElement = 0;
}
$(elements[currentElement]).fadeIn(2000);
};
setInterval(nextElement, 3000); // edit this to change the delay between images
I assume you're trying to make a slideshow, where one image appears in the same spot as the previous images disappears, in that case instead of doing float: left though, I think you might want to do:
#images div {
position: absolute;
left: 0px;
}
This will make it so all the divs are stacked on top of each other, rather than having multiple div's side-by-side.
Also, you do not need to put #images in your selector, id tags are supposed to be unique on a page, so when referencing with id's (using the #) you do not need any other selectors. It should just be $("#image1").
You can try this messy callback nesting:
setInterval(function(){
$("#images #image1").fadeOut(2000, function(){
$("#images #image2").fadeIn(2000, function(){
$("#images #image2").fadeOut(2000,function(){
$("#images #image3").fadeIn(2000, function(){
$("#images #image3").fadeOut(2000, function(){
$("#images #image4").fadeIn(2000, function(){
$("#images #image4").fadeOut(2000, function(){
$("#images #image1").fadeIn(2000, function();
});
});
});
});
});
});
});
}, 16100);
加载中,请稍侯......
精彩评论