As per my previous question, I have a working animation which fades in and out each element within the div slideshow. The problem is that I want this animation to continue from the beginning once it has reached the last element. I figured that was easy and that I'd just place an infinite loop inside my JQuery function, but for some reason if I insert an infinite loop, no animation displays and the page hangs. I also cannot find anything in the documentation about how properly place a callback. How can I get this code to restart from the beginning of the animation once it finishes iterating over each object and why is an infinite loop not the right way to go about this?
<div id="slideshow">
<p>Text1</p>
<p>Text2</p>
<p>Test3</p>
<p>Text4</p>
</div>
<script>
$(document).ready(function() {
var delay = 0;
$('#slideshow p').each(
function (index, item)
{
$(this).delay(delay).fadeIn('slow').delay(800).fadeOut('slow');
delay += 2200;
}
);
});
</script>
You could do something like this:
$(function() {
var d = 2200;
function loopMe() {
var c = $('#slideshow p').each(function (i) {
$(this).delay(d*i).fadeIn('slow').delay(800).fadeOut('slow');
}).length;
setTimeout(loopMe, c * d);
}
loopMe();
});
You can give it a try here.
Instead of keeping up with a delay, you can just multiple it by the current index in the loop...since the first index is 0, the first one won't be delayed at all, then 2200ms times the amount of elements later, do the loop again. In the above code d is the delay, so it's easily adjustable, and c is the count of elements.
This solution is in my opinion more elegant, also more natural, it is easier to control, to correctly edit values of delays etc. I hope you'll like it.
$(document).ready(function () {
var elementsList = $('#slideshow p');
function animationFactory(i) {
var element = $(elementsList[i % elementsList.length]);
return function () {
element.delay(200).fadeIn('slow').delay(800).fadeOut('slow', animationFactory(i + 1));
};
}
animationFactory(0)();
});
Related
I am attempting to build a very simple automated slideshow from scratch, but I'm coming across some difficulty. I've built working slideshows before, but not ones that were automated. So I began building one and tried using a for loop structure or the setInterval() method to mimic a loop:
$(function carousel() {
$('.slide:not(:first-child)').hide();
var slide1 = $('.slide:first-child');
var slide2 = $('.slide:nth-child(2)');
var slide3 = $('.slide:nth-child(3)');
var slide4 = $('.slide:last-child');
function moveSlide(currentSlide, nextSlide) {
setInterval(function () {
currentSlide.hide("slide", {direction: "left"}, 1000);
setTimeout(function () {
nextSlide.show("slide", {direction: "right"}, 1000);
}, 1000);
}, 1500);
}
var arr = [moveSlide(slide1, slide2), moveSlide(slide2, slide3), moveSlide(slide3, slide4)];
var i = 0;
setInterval(function () {
if (i < arr.length) {
arr[i] += 1;
console.log(i + "=>" + arr[i]);
} else {
return;
}
i++;
}, 1500);
});
Here's a Codepen.
Unfortunately, this did not go well, and I know why. I understand that in JS, the code will continue to execute and will not wait for the information in a loop to finish if using setInterval or setTimeout. So my question is, what would be a good workaround that doesn't require using an external library or plugin? If you could try to stick as close to my source code as possible that would be awesome. Thanks!
There are a few problems with your code. Calling moveSlide() will hide the specified slide and (after the timeout) show the specified next slide, but your use of setInterval() within that function means it will keep trying to hide the same first slide and then show the next one.
The line with var arr = [moveSlide(slide1, slide2),... is calling the moveSlide() function immediately and putting its return values into the array. So that means you've got several intervals all running (one per call to moveSlide()), and all stepping over each other trying to hide and show the same elements. Also the return value is undefined, so basically you've got an array full of undefined.
What I would suggest you do instead is something like the following:
$(function carousel() {
// get a list of *all* slides:
var slides = $('.slide');
// hide all but the first:
slides.slice(1).hide();
var current = 0;
setInterval(function() {
// hide the current slide:
slides.eq(current).hide(1000);
// increment the counter, wrapping around from end of the
// list to the beginning as required:
current = (current + 1) % slides.length;
// show the next slide after a timeout:
setTimeout(function () {
// note that `current` was incremented already:
slides.eq(current).show(1000);
}, 1000);
}, 3500); // make the interval larger than the hide/show cycle
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>
Notice that I don't need individual variables for the individual slides, I just have a single slides variable that is a jQuery object containing all of the slides. This means you can easily change the number of slides on the page without changing the JS at all.
Note that I was too impatient to get jQueryUI to work in the snippet so I've just used a simple .hide() and .show(), but obviously that isn't the important part of the code I've shown.
I got X DIV (TopRowRight1, TopRowRight2, TopRowRight3...) , each containing a different Google Geochart generated by a php page : GeochartPerProvince.php?template=X.
function getResult(template){
jQuery.post("GeochartPerProvince.php?template="+template,function( data ) {
jQuery("#TopRowRight"+template).html(data);
});
}
jQuery().ready(function(){
getResult(1);
setInterval("getResult(1)",10000);
getResult(2);
setInterval("getResult(2)",10000);
getResult(3);
setInterval("getResult(3)",10000);
});
jQuery(function () {
var $els = $('div[id^=TopRowRight]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 5000)
});
Every 5 seconds, i fade out one and fade in the next one. This works perfectly.
For now, the php page in the DIV is refreshed every 10 seconds. This works too.
But what i dream about is that the php page in the DIV is reloaded AFTER the DIV is faded out instead of every 10 seconds. How to do it?
Solved. How it works properly:
function getResult(template){
jQuery.post("GeochartPerProvince.php?template="+template,function( data ) {
jQuery("#TopRowRight"+template).html(data);
});
}
$(document).ready(function(){
getResult(0);
getResult(1);
getResult(2);
//setInterval("getResult(2)",10000); <== keep this piece of code in case of need.
});
$(document).ready(function () {
var $els = $('div[id^=TopRowRight]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
getResult(i);
$els.eq(i).fadeIn();
})
}, 10000)
});
You're already using a callback function after the element has been faded out. So why not call your getResult function inside it?
$el.fadeOut(function(){
// stuff
getResult(i)
})
I have a few suggestions and an example code for you to achieve what you need :
Use $ instead of jQuery for easier reading / writing
$(document).ready is the proper start point for dom related functions
If only one div is visible at a time, do not use too many divs. Most of the time one div is enough for alternating / refreshing content. If there is in/out animation or cross-fading, two divs would be needed. (Example below uses two divs)
Avoid using setInterval except you really really need. Logics with setTimeout better handles unexpected delays such $.post may cause.
start with html code something like this:
...
<div class="top-row-right" style="display:block"></div>
<div class="top-row-right" style="display:none"></div>
...
js:
$(document).ready( function() {
var len = 4; // 'I got X DIV..' This is where we put the value of X.
var template = -1;
function refreshChart() {
template = (template + 1) % len;
$.post("GeochartPerProvince.php?template="+template, function(data) {
var offscreenDiv = ('.top-row-right:hidden');
var onscreenDiv = ('.top-row-right:visible');
offScreenDiv.html(data);
onScreenDiv.fadeOut('slow', function() {
offScreenDiv.fadeIn();
setTimeout(refreshChart, 10000);
});
});
}
refreshChart();
});
I have some code that works, but sometimes it just "jumps" to the other text without respecting the interval.
The code basically changes a header's text on an interval.
var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;
$("#description").fadeOut("slow");
setInterval(function(){
$("#description").html(text[index]).fadeIn("slow");
$("#description").delay(400).fadeOut("slow");
index++;
if (index == 5) {
index = 0;
};
}, 1800);
If you guys can help me make this work,or even improve it I would be very thankful :)
Fiddle: http://jsfiddle.net/erbfqqxb/
I think the problem may be caused when your interval catches up to the time taken for your delays and fades. Try running each animation in the callback so that it is run as a linear process to keep the text from "jumping":
var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;
var description = $("#description");
description.fadeOut("slow", changeText);
function changeText(){
// run the initial animation
description.html(text[index]).fadeIn("slow", function() {
// run the second animation after the first one has finished - can remove the delay if you want to
// the delay here is how long you want the text to be visible for before it starts to fade out
description.delay(400).fadeOut("slow", function() {
index++;
//measure against array length instead of hard coded length
if (index == text.length) {
index = 0;
};
//set the delay before restarting animation sequence (only restart once the sequence has finished)
setTimeout(changeText, 400);
});
});
}
Updated fiddle
Just try as below:
setInterval(function(){
//first stop what you are doing and then fadeIn again
$("#description").stop().html(text[index]).fadeIn("slow",function(){
//set a callback to do all these things once fadeIn is completed
index++;
$("#description").delay(400).fadeOut("slow");
if (index == 5) {
index = 0;
};
});
},1800);
I think the problem was with delay. setInterval time and delay time were conflicting. So the above approach seems better to me.
DEMO
I think this happen due to the line
$("#description").fadeOut("slow");
comment that line it will work fine.
Here is the working code and its more dynamic by using
index == text.length
$(function() {
var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;
$("#description").fadeOut();
setInterval(function(){
$("#description").html(text[index]).fadeIn("slow");
$("#description").delay(400).fadeOut("slow");
index++;
if (index == text.length) {
index = 0;
};
},1800);
});
<pre>Use call back function and remove delay</pre>
JSFIDDLE: http://jsfiddle.net/rajen_ranjith/erbfqqxb/3/.
i created music blog using soundcloud widgets. I trigger a button "Play all", so when you hit it, it plays all widgets.
$(function(){
var playAll = $('.playAll');
var widget0 = SC.Widget(playAll.find('iframe')[0]);
var widget1 = SC.Widget(playAll.find('iframe')[1]);
var widget2 = SC.Widget(playAll.find('iframe')[2]);
widget0.bind(SC.Widget.Events.FINISH,function() {
widget1.play();
widget0.unbind(SC.Widget.Events.FINISH);
});
widget1.bind(SC.Widget.Events.FINISH,function() {
widget2.play();
widget1.unbind(SC.Widget.Events.FINISH);
});
$("#playSound").click(function() {
widget0.toggle();
});
});
It works, but what i'm trying to do is "for" loop, but because lack of js / jquery skills, it doesn't work.
I love the enthusiasm to refactor code and the desire to use a higher level pattern, looping, instead of hard coding like you have. That being said the "middle space" problem is one of the harder problems to solve when iterating over a list.
You have to decide on a couple of things:
You have a task your going to perform n-1 times so you have to decide if your going to skip the first element or the last.
What task your going to perform in each iteration.
What you'll do after the loop finishes.
If you'll use a functional solution or a classic "for" loop.
Lets start with the task. We'll take the task from your example and put it in a function.
function connectFrames(now, next) {
now.bind(SC.Widget.Events.FINISH, function() {
next.play();
now.unbind(SC.Widget.Events.FINISH);
});
}
With this function we can use the index from our loop to pass in the current and next elements. The only exception will be when we are on the last element when there will be no "next", so that is the one we will skip. We will use the jQuery each for a modern / functional solution.
//One query to select all iframes inside .playAll
var playAll = $('.playAll iframe');
//The jQuery "loop" http://api.jquery.com/each/
playAll.each(function(index) {
var now = playAll[index],
next = playAll[index + 1];
//If their is no next... skip.
if(!next) return;
//Use the frames we have in our function
connectFrames(now, next);
});
The last thing we have to do is write in our final step which would be to start playing the content and we are done. Here is the complete code:
function connectFrames(now, next) {
now.bind(SC.Widget.Events.FINISH, function() {
next.play();
now.unbind(SC.Widget.Events.FINISH);
});
}
//One query to select all iframes inside .playAll
var playAll = $('.playAll iframe');
//The jQuery "loop" http://api.jquery.com/each/
playAll.each(function(index) {
var now = playAll[index],
next = playAll[index + 1];
//If their is no next... skip.
if(!next) return;
//Use the frames we have in our function
connectFrames(now, next);
});
//initiator from example
$("#playSound").click(function() {
playAll[0].toggle();
});
Assuming the HTML looks somewhat like this :
<div class="playAll">
<div>
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
</div>
</div>
You get get the list of all iframes inside the div with class "playAll" (no matter the depth), and iterate:
var iframes = $(".playAll iframe");
for (i = 0; i < iframes.length; i++) {
// do something with iframes[i]
}
http://api.jquery.com/descendant-selector/
Code below (the divs are shaded in my real example, I want to sequentially decrease their opacity to 0 so each disappears, in order.
I tried to doing this without using setTimeout, but all of the divs disappeared simultaneously - its good to know that the part of the code that changes the opacity works, but I cant seem to get them to work sequentially.
When I try to use setTimeout (which I presume I am implementing incorrectly),nothing happens!
Any help would be really appreciated with this, I'm fairly new to JavaScript and haven't touched it in a while and tutorials haven't been able to help me.
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script type="text/javascript">
// the divs that we want to cycle through are named here.
var divs = ["#div1", "#div2", "#div3", "#div4"];
var divsLength = divs.length;
for (var i = 0; i < divsLength; i++) {
setTimeout(function(){
$(divs[i]).fadeTo(1000, 0, function() {
});
},1500);
};
</script>
</body>
Here's a way you should be able to do this without setTimeout:
function doFade(items, index) {
$(items[index]).fadeTo(1000, 0, function() {
doFade(items, index + 1);
});
}
doFade(divs, 0);
If you're targetting browsers that support ES5 (most modern versions do), then you can further simplify doFade:
function doFade(items, index) {
$(items[index]).fadeTo(1000, 0, doFade.bind(this, items, index + 1));
}
working jsfiddle
You can use a recursive function to do that kind of thing, something like that :
function seqFade($el){
$el.first().fadeOut(500, function(){ //Take the first element and fade it out
seqFade($el.slice(1)); //Recall the function when complete with the same set of element minus the first one.
})
}
seqFade($('div')); //Call the function
http://jsfiddle.net/L2fvdfy2/
In your code, it could look like that :
function seqFade($el){
$el.first().fadeOut(500, function(){
seqFade($el.slice(1));
})
}
seqFade($('#div1, #div2, #div3, #div4'));
It's because when the timeout finally fires the variable "i" only has the last index value. Also the loop will start all the timeouts at almost the same time.
There are other ways to accomplish it but this might work with minimal changes to your code.
Try this:
<script type="text/javascript">
var divs = ["#div1", "#div2", "#div3", "#div4"];
var divsLength = divs.length;
for (var i = 0; i < divsLength; i++) {
setTimeout((function(index) {
return function(){
$(divs[index]).fadeTo(1000, 0, function() { });
}
)(i)),1500 + (i * 1500));
};
</script>
</body>
This will create an instance of the function with it's own copy of the index when it was called. Also increasing the timeout of each timeout will have them execute sequentially.
try this:
// the divs that we want to cycle through are named here.
var divs = ["#div1", "#div2", "#div3", "#div4"];
(function fade(i) {
$(divs[i]).fadeTo(1000, 0, function() {
setTimeout(function() {fade(++i);}, 500);
});
})(0);
for (var i = 1; i <= divsLength; i++) {
setTimeout(function(){
$(divs[i]).fadeTo(1000, 0, function() {
});
},1000*i);
lets try this