Please take a look at this function:
var msgdiv, i=0;
msgdiv=$("#message");
messages=["Welcome!","Добро пожаловать!"];
function fadeMessages(messages, div){
while(i<messages.length){
div.fadeOut(1000).html('').append(messages[i]).fadeIn(1000);
i=i+1;
}
}
fadeMessages(messages,msgdiv);
What I want to do is, to show one by one elements of array. But, function above shows only last element of array messages.length time. Where I did wrong?
Live example: http://jsfiddle.net/QQy6X/
The while executes much much faster than the fadeOut/fadeIn calls, so you only see the last result. You need to make each animation wait for the previous ones to finish.
I like to solve these problems recursively. Note, it does alter the messages array, but it's not too hard to convert this to use a counter instead (like your original version). Here you go:
var $msgdiv = $('#message'),
messages = ['Xoş gəlmişsiniz!', 'Welcome!', 'Добро пожаловать!'];
function showNext() {
var msg = messages.shift();
if (msg) {
$msgdiv.fadeOut(1000, function () {
$(this).text(msg).fadeIn(1000, showNext);
});
}
}
showNext();
Demo: http://jsfiddle.net/mattball/Exj95/
Here's a version that leaves messages intact:
var $msgdiv = $('#message'),
messages = ['Xoş gəlmişsiniz!', 'Welcome!', 'Добро пожаловать!'],
i = 0;
function showNext() {
if (i < messages.length) {
var msg = messages[i];
$msgdiv.fadeOut(1000, function () {
i++;
$(this).text(msg).fadeIn(1000, showNext);
});
}
}
showNext();
Demo: http://jsfiddle.net/mattball/wALfP/
Your while loop finishes executing before the div has had a chance to fade out. Use an if statement and recursion:
var msgdiv = $("#message");
var i = 0;
var messages = ["Welcome!", "Добро пожаловать!"];
(function fadeMessages() {
if (i in messages) {
msgdiv.fadeOut(1000, function() {
$(this).html('').append(messages[i++]).fadeIn(1000, fadeMessages);
});
}
})();
http://jsfiddle.net/QQy6X/6/
Your while loop finishes very quickly; instead you should wait for the animation to finish before starting the next one. This is easy to do by adding a callback function to fadeIn. I would use this:
+function(){
var $msgdiv = $("#message");
var i = -1;
var messages = ["Xoş gəlmişsiniz!","Welcome!","Добро пожаловать!"];
+function fadeNext(){
$msgdiv.fadeOut(1000, function(){
$msgdiv.text(messages[i = (i + 1) % messages.length]);
$msgdiv.fadeIn(1000, fadeNext);
});
}();
}();
http://jsfiddle.net/Paulpro/QQy6X/7/
In jQuery, you can't intertwine animations and non-animations in the way you are doing and expect them to run in the right order. The animations will go into the animation queue and get sequenced one after another there, but the non-animations will all run immediately. Thus, things won't happen in the right order.
To do something like you want to do, you can use code like this.
messages=["Welcome!","Добро пожаловать!"];
function fadeMessages(msgs, div) {
var i = 0;
function next() {
if (i < msgs.length) {
div.fadeOut(1000, function() {
div.html(msgs[i++]).fadeIn(1000, next);
});
}
}
next();
}
fadeMesssages(messages, div);
This uses the completion functions of both fadeIn() and fadeOut() to carry out the next steps. Here's how it works:
It fades out the div.
In the completion function of the fadeOut, it sets the next message and then starts the fadeIn.
It advances the message counter.
In the completion function from the fadeIn, it calls the function to start the next iteration.
If you want a delay before the fadeOut (to make sure a given message displays for a certain amount of time), you can add that with this .delay(2000) added in the right place:
messages=["Welcome!","Добро пожаловать!"];
function fadeMessages(msgs, div) {
var i = 0;
function next() {
if (i < msgs.length) {
div.delay(2000).fadeOut(1000, function() {
div.html(msgs[i++]).fadeIn(1000, next);
});
}
}
next();
}
fadeMesssages(messages, div);
If you want a delay before the next iteration starts, you can do that like this with a setTimeout:
messages=["Welcome!","Добро пожаловать!"];
function fadeMessages(msgs, div) {
var i = 0;
function next() {
if (i < msgs.length) {
div.fadeOut(1000, function() {
div.html(msgs[i++]).fadeIn(1000, function() {
setTimeout(next, 2000);
});
});
}
}
next();
}
fadeMesssages(messages, div);
Related
I have a javascript function that cycles through background images inside of a div. It works well, but it stops when it runs through all the images. How can I call this again when it's done?
$(document).ready(function(){
FlipBackgroundOver();
});
function FlipBackgroundOver()
{
$(".bkgrndimg").each(function(index) {
$(this).hide();
$(this).delay(5000 * index).fadeIn(5000).fadeOut();
});
}
If I add FlipBackgroundOver(); inside the function, it goes into an infinite loop because the delay doesn't stop the function execution.
Here is a fiddle with what I'm working with: http://jsfiddle.net/RyGKV/
On jq 1.6+, you should use promise() relevant callback:
function test() {
$("img").each(function(index) {
$(this).delay(3000 * index).fadeIn(3000).fadeOut();
}).promise().done(test);
}
-jsFiddle-
You can use setInterval to repeat execution with a dealy
$(document).ready(function(){
setInterval(FlipBackgroundOver, 10000); // delay should be based on the number of images => numer_of_images * delay_for_each
});
You can change the delay to value you want based on the number of images you have.
Create a loop in an infinite interval by your own. I used the helper function next for this.
var elements = $("img");
var index = 0;
function next() {
index = ++index == elements.length ? 0 : index;
elements.hide().eq(index).fadeIn(3000).fadeOut();
}
function start() {
// show first one directly
next();
// start infinite loop
setInterval(function() {
next();
}, 3000);
}
start();
Working example.
I have a setInterval on a function X that runs every 500ms. In this function X, I call another function Y that essentially binds an event on some divs. However, I would like to unbind these events the next time the function X is called (to start "fresh"). My code doesn't seem to work:
setInterval(this.board.updateBoard, 500); //called from another constructor
This then initiates the functions below:
Board.prototype.updateBoard = function() {
//I attempt to unbind ALL my divs
var divs = this.$el.find("div");
for(var i = 0; i < divs.length; i++) {
$(divs[i]).unbind(); //Apparently this doesn't work?
}
//...some code here...
//find appropriate $div's (multiple of them), and then calls this.beginWalking() below on each of those
//loop here
this.beginWalking($div, direction + "0", direction + "1");
//end of loop
}
//alternate between classes to give appearance of walking
Board.prototype.beginWalking = function ($div, dir0, dir1) {
return setInterval(function () {
if ($div.hasClass(dir0)) {
$div.removeClass(dir0);
$div.addClass(dir1);
} else {
$div.removeClass(dir1);
$div.addClass(dir0);
}
}.bind(this), 80);
};
Basically, updateBoard is called every 500ms. Each time it's called, beginWalking is called to set another interval on a div. The purpose of this other interval, which functions correctly, is to add and remove a class every 80ms. I just can't seem to unbind everything before the next updateBoard is called.
Any suggestions appreciated!
use clearInterval()
edit: $(selector).toggleClass(dir0) might also be helpful
// In other file, use a global (no var) if you need to read it from another file:
updaterGlobal = setInterval(this.board.updateBoard, 500);
// store interval references for clearing:
var updaterLocals = [];
Board.prototype.updateBoard = function() {
//I attempt to unbind ALL my divs
var divs = this.$el.find("div");
// Stop existing div timers:
while(updaterLocals.length > 0){
clearInterval(updaterLocals[0]);
updaterLocals.shift(); // remove the first timer
}
//...some code here...
//loop here to call the below on several $div's
this.beginWalking($div, direction + "0", direction + "1");
//end of loop
}
//alternate between classes to give appearance of walking
Board.prototype.beginWalking = function ($div, dir0, dir1) {
var interval = setInterval(function () {
if ($div.hasClass(dir0)) {
$div.removeClass(dir0);
$div.addClass(dir1);
} else {
$div.removeClass(dir1);
$div.addClass(dir0);
}
}.bind(this), 80);
// Save the timer:
updaterLocals.push(interval);
return;
};
I am trying to animate a handful of DIV's to scroll upwards but I want one to scroll up after a pause after the other after the other. And the best I can come up with at the moment is
$('.curtain').each(function()
{
var $elem = $(this);
setTimeout(function()
{
$elem.animate({"height":0+'px'}, 2000);
}, 1000);
});
Problem is they still all animate together without pause. How can I go about doing something in this fashion. The divs are dynamically generated and there can be 5 - 20 of them so doing a hardcoded logic is out, any ideas?
function animateIt () {
var elems = $('.curtain').get();
(function next() {
if(elems.length){
var elem = $(elems.shift());
elem.animate({"height":0+'px'}, 2000, next);
}
})();
}
animateIt();
running example
Another way like queue
function animateIt () {
var divs = $('.curtain');
divs.each( function(){
var elem = $(this);
$.queue(divs[0],"fun", function(next) { elem.animate({"height":0+'px'}, 2000, next); });
});
divs.eq(0).dequeue("fun");
}
Looks like a simple recursive function might work for you here -
function doAnimation(elapsed){
var iterations = $('.curtain').length;
var current = elapsed+1;
if (current <= iterations){
setTimeout(function(){
$('.curtain:eq(' + elapsed + ')').animate(...);
doAnimation(current);
},50);
}
}
doAnimation(0);
Here's a simple demo
I'm putting together some code to essentially replace the contents of a div when I mouseover a specific link. I then added the changer function to cycle through the content replacement automatically. I set flags for mouseover and mouseout and I can actually get the changer function to stop on mouseover but I can't quite figure out how to make it start up again on mouseout. Any advice is appreciated.
var pause=false;
$('.banner-nav a').mouseover(function () {
pause=true;
setFeature(this);
return false;
});
$('.banner-nav a').mouseout(function () {
pause=false;
});
changer(0, 5000);
function setFeature(f) {
var m = $(f).attr('rel');
$('.banner-nav a').not(f).removeClass('active');
$(f).addClass('active');
$('#featureContainer').html($(m).html());
}
function changer(index, interval) {
var buttons = $('.trigger'),
buttons_length = buttons.length;
var button = buttons.eq(index % buttons_length);
setFeature($(button));
setTimeout(function() {
if (!pause) {
changer(++index, interval);
}
}, interval)
}
The issue is that changer is responsible for its own delayed execution, but pausing it stops the scheduled execution. Another problem is that the next scheduled execution (if any) still happens after pausing.
Use setInterval instead of setTimeout. Instead of using a flag, clear the interval to pause and start it again to unpause.
(function() {
var index=0;
function changer() {
var buttons = $('.trigger'),
buttons_length = buttons.length;
var button = buttons.eq(index % buttons_length);
setFeature($(button));
++index;
}
var changerInterval,
period = 5000;
function startChanger() {
if (! changerInterval) {
changerInterval = setInterval(changer, interval);
}
}
function stopChanger() {
clearInterval(changerInterval);
changerInterval = 0;
}
$('.banner-nav a').mouseover(function () {
stopChanger();
setFeature(this);
return false;
});
$('.banner-nav a').mouseout(function () {
startChanger();
});
/* could implement other functions to e.g. change the period */
function setChangerPeriod() {
...
}
window.setChangerPeriod = setChangerPeriod;
...
})
all of my thumbnails have the class .thumb
I'm trying to fade in each at a time like I've seen on some websites but it doesnt seem to be working. My code is below
$('.thumb').eachDelay(function(){
$(this).fadeIn('1000');
}, 100);
What is wrong here?
Here is a fiddle: http://jsfiddle.net/NPWGu/
I've tried a ton of the solutions and havent had any luck yet so hopefully this will help make it easier to understand how I have my code setup
Try this:
$(".thumb").each(function(i) {
$(this).delay(500*i).fadeIn(1000);
});
I'm not aware of any jQuery method called eachDelay(). As it is not quite clear from your question which exact scenario you want, here are four different different options:
1) If you want to fade them all in at once, you would use this:
$('.thumb').fadeIn('1000');
2) If you want to fade them all in at the same time after delay, you can use this:
$('.thumb').delay(1000).fadeIn('1000');
3) If you want to fade them all in one after another, you can use this:
function sequentialFade(selector) {
var items$ = $(selector);
var index = 0;
function next() {
if (index < items$.length) {
items$.eq(index++).fadeIn('1000', next);
}
}
next();
}
sequentialFade('.thumb');
4) If you want to fade them all in one after another with a delay between the finish of one and the start of the next, you can use this:
function sequentialFade(selector, delayTime) {
var items$ = $(selector);
var index = 0;
function next() {
if (index < items$.length) {
items$.eq(index++).delay(delayTime).fadeIn(1000, next);
}
}
next();
}
sequentialFade('.thumb', 1000);
Working demonstration of this last option here: http://jsfiddle.net/jfriend00/zg8S4/
Serial animation code should look like (you can change the 1000ms below as needed):
var cur = -1;
var thumbs = $(".thumb");
function doIt() {
if(cur == -1) cur = 0;
else if(cur < thumbs.length-1) cur++;
else return;
$(thumbs[cur]).fadeIn(1000, doIt);
}
doIt();