Develop Reference

jQuery animation out of sync

Very shortly after my animation starts, it goes out of sync.
The divs are supposed to fade in and fade out after one another.
Please take a look at my code below...
Thanks
(document).ready(function(){
animate_loop = function animate_loop(){
$( "#w01" ).animate({ opacity: 0.4, }, 1000,
function(){ $( "#w01").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w02" ).animate({ opacity: 0.4, }, 1500,
function(){ $( "#w02").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w03" ).animate({ opacity: 0.4, }, 2000,
function(){ $( "#w03").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w04" ).animate({ opacity: 0.4, }, 2500,
function(){ $( "#w04").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
});

If you want more control use the code below. I highly recommend using adding a class and then animating trough CSS instead of making a jquery loop.
Here's a new demo: http://jsfiddle.net/mirohristov/gw8kskom/1/
$(document).ready(function(){
$('#w01').delay(1000).queue(function(){
$(this).addClass("go");
});
$('#w02').delay(1500).queue(function(){
$(this).addClass("go");
});
$('#w03').delay(2000).queue(function(){
$(this).addClass("go");
});
$('#w04').delay(2500).queue(function(){
$(this).addClass("go");
});
});

If you are trying to just make a fade effect, use css and add a class at a different time with setInterval. Use .each(index, el) to iterrate trough each element. Index will be 1, 2, 3, 4, etc... so use that to delay your animation.
Here's a demo: http://jsfiddle.net/mirohristov/gw8kskom/
$(document).ready(function(){
$('.child').each(function(index, el){
setTimeout(function(){
$(el).addClass('go');
}, 200*index);
});
});

When reaching viewport point then troggle my sidebar

I need to be able to troggle my sidebar.
This works but I also need to hide the sidebar when reach viewport > 740px.
The troggle needs to work also. I came a far way but I think I have to combine these two to let it work properly.
Anyone knows hot to do this?
CHECK OUT MY FIDDLE PLEASE >
My script:
$('.troggler').toggle(
function() {
$('.right').animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}, function() {
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
})
$(window).resize(function() {
if ($(window).width() < 740) {
$(".right").animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}
else {
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
}
});

I guess the $(window).resize() fires multiple events while you ara resizing the window.
To solve this, you might wait for the resizing (dragging) complete.
// Basic Concept is ...
$(window).resize(function () {
if( ... event not fired ... ){
setTimeout(function(){
// toggle your navi
},500);
}
....
});
DEMO:http://jsfiddle.net/VseLR/13/
Your code could go like this:
function showNavi(){
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
}
function hideNavi(){
$('.right').animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}
$('.troggler').toggle(function() {
showNavi();},
function() {
hideNavi();
});
function applyLayout() {
if ($(window).width() < 740) {
hideNavi();
}else {
showNavi();
}
}
var timer = 0;
var delayToCall = (function () {
return function (callback, ms) {
if (timer > 0) {
clearTimeout (timer);
}
timer = setTimeout(callback, ms);
};
})();
$(window).resize(function () {
delayToCall(function(){
applyLayout();
}, 500);
});
You might want to check this question:
JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?
Hope this helps.

Javascript setTimeout + loop

I try to loop some div's, and I have that code:
var first = ".first";
for (i = 0; i < 9999; i++) {
setTimeout(function () {
$(first).delay(500).animate({
"opacity": "1"
}, 1500);
$(first).delay(1500).animate({
"opacity": "0"
}, 1500);
$(".1").delay(4500).animate({
"opacity": "1"
}, 1500);
$(".1").delay(1500).animate({
"opacity": "0"
}, 1500);
$(".2").delay(4800).animate({
"opacity": "1"
}, 1500);
$(".2").delay(1500).animate({
"opacity": "0"
}, 1500);
$(".3").delay(5300).animate({
"opacity": "1"
}, 1500);
$(".3").delay(1500).animate({
"opacity": "0"
}, 1500);
$(".4").delay(5600).animate({
"opacity": "1"
}, 1500);
$(".4").delay(1500).animate({
"opacity": "0"
}, 1500);
$(".5").delay(5900).animate({
"opacity": "1"
}, 1500);
$(".5").delay(1500).animate({
"opacity": "0"
}, 1500);
}, 6000);
}
I tried without setTimeout and effect was the same - divs was appeared and disappeared only in 1st loop. In each next loop they're appeared in random order. I know, that method is wrong, but I'm green with JavaScript and I have no idea how to do it correct. Someone can help me?

It is because the for loop keep attaching events and you are 9999 animations to the same element with no delay. They are just pounding on each other. The code makes no sense.
If you want the code to run in a loop, you can use a callback in one of the animations and call a function when it is done. Other option is to use a Interval, but that gets messy with timing events not being accurate and they can pile up.

It seems like you're trying to make the elements animate seemingly indefinitely by running a setTimeout timer a large number of times. For that you should instead use setInterval() to have the function run every 6 seconds.
So, instead of...
for (i = 0; i < 9999; i++) {
setTimeout(function () {
$(first).delay(500).animate({
"opacity": "1"
}, 1500);
// etc etc
}, 6000);
}
...do this:
setInterval(function () {
$(first).delay(500).animate({
"opacity": "1"
}, 1500);
// etc etc
}, 6000);
(note: no for loop.)
Demo: http://jsfiddle.net/57sYA/

I have found solution of my problem - setInterval
var licznik=0;
function show_anim(){
if(licznik!=9999){
$("#first").delay(500).animate({"opacity": "1"}, 1500);
$("#first").delay(1500).animate({"opacity": "0"}, 1500);
$("#1").delay(4500).animate({"opacity": "1"}, 1500);
$("#1").delay(1500).animate({"opacity": "0"}, 1500);
$("#2").delay(4800).animate({"opacity": "1"}, 1500);
$("#2").delay(1500).animate({"opacity": "0"}, 1500);
$("#3").delay(5300).animate({"opacity": "1"}, 1500);
$("#3").delay(1500).animate({"opacity": "0"}, 1500);
$("#4").delay(5600).animate({"opacity": "1"}, 1500);
$("#4").delay(1500).animate({"opacity": "0"}, 1500);
$("#5").delay(5900).animate({"opacity": "1"}, 1500);
$("#5").delay(1500).animate({"opacity": "0"}, 1500);
licznik++;
console.log(licznik);
}
}
$(document).ready(function(){
show_anim()
setInterval("show_anim()",12000);
});
Demo: http://jsfiddle.net/D5bxA/

fading images in a slideshow when hovering external images

I have created (with help from other scripts found online) a slideshow script that turns other images to greyscale when hovered and pauses the slideshow at the same time. The problem is, when I hover over one of these images that is not part of the slideshow I cant get them to fade. I've tried a number of things to solve this including adding the required greyscale image over the existing image but I can't get the effect to look the same so its kind of pointless.
The code for this is as follows (I apologise if it's a mess I'm still pretty new to Javascript):
// Holds the alt description of an image
var desc;
// Used to try to solve problem
var bgimg;
var bgli;
var current;
$(document).ready(function () {
//Execute the slideShow, set to 3 seconds for each images
slideShow(1000);
current = $('ul.slideshow li.show');
});
$(window).focus(function () {
timer = setInterval('gallery()', speed);
});
$(window).blur(function () {
clearInterval(timer);
});
function slideShow(speed) {
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()', speed);
desc = $('ul.slideshow li.show').find('img').attr('alt');
//pause the slideshow on mouse over
$('img.color').hover(
function () {
clearInterval(timer);
$('#caption').stop().animate({'height': '70px'}, 1000);
cptxt(desc);
if (this.id == "img6" || this.id == "img7" || this.id == "img8" || this.id == "img9" || this.id == "img10") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
}
},
function () {
timer = setInterval('gallery()', speed);
$(img1).stop().animate({"opacity": "1"}, "slow");
$(img2).stop().animate({"opacity": "1"}, "slow");
$(img3).stop().animate({"opacity": "1"}, "slow");
$(img4).stop().animate({"opacity": "1"}, "slow");
$(img5).stop().animate({"opacity": "1"}, "slow");
$('#caption').stop().animate({'height': '0px'}, 1000);
$('#caption').html('');
});
}
function gallery() {
//if no IMGs have the show class, grab the first image
if ($('ul.slideshow li.show').length){
// if we found an item with the show class, assign it to current
current = $('ul.slideshow li.show');
} else {
// otherwise nothing is being shown, default to first element
$('#ul.slideshow li:first');
}
//trying to avoid speed issue
if (current.queue('fx').length == 0) {
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next;
// if there are additional elements (true when .length > 0)
if (current.next().length) {
next = current.next();
if (next.attr('id') == 'dark') {
bgli = next;
bgimg = next.find('img');
next = next.next();
}
} else {
// there is no next element, go back to first.
next = $('ul.slideshow li:first');
}
desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
}
function cptxt(altmsg) {
$('#caption').html(altmsg);
}
$(document).ready(function(){
$('img.color').hover(
function() {
if (this.id == "img1") {
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img2") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img3") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img4") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img5") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
},
function() {
$(img1).stop().animate({"opacity": "1"}, "slow");
$(img2).stop().animate({"opacity": "1"}, "slow");
$(img3).stop().animate({"opacity": "1"}, "slow");
$(img4).stop().animate({"opacity": "1"}, "slow");
$(img5).stop().animate({"opacity": "1"}, "slow");
$(img6).stop().animate({"opacity": "1"}, "slow");
$(img7).stop().animate({"opacity": "1"}, "slow");
$(img8).stop().animate({"opacity": "1"}, "slow");
$(img9).stop().animate({"opacity": "1"}, "slow");
$(img10).stop().animate({"opacity": "1"}, "slow");
}
);
});
Sorry if the code is terrible :D. I spent a few minutes trying to lay it out properly but a lot of it needs to be cleaned up.
Anyway, to reiterate, hovering over slideshow images truns other images to greyscale correctly. Hovering over otherimages does not turn current slideshow image to greyscale.
Any help would be appreciated.
As requested, JSFiddle link
http://jsfiddle.net/KXW4f/12/
The slideshow doesn't appear to work on it but I may have some wrong settings selected on that site. It works when run on my PC anyway but the general idea is shown though I think.
Currently, the slideshow images just fade out to white background (opacity goes to 0) but what I want is for a greyscale image to appear as it fades out. Thanks.

Ok, with the example it was a lot easier to understand. Nevertheless the conception of your code is a bit messy... ;)
First of all, the link to the corrected code (should work now): http://jsfiddle.net/Aletheios/ZZHjS/2/ (new link)
I've done the following changes:
Declared global variables timer, speed and img1-img8 to resolve several errors.
Removed slideshow start in slideShow(), the slideshow was started twice (slideShow() and window.focus).
Added display/show functionality for the big grayscale images. The code detects which image is currently shown in the slideshow and displays its grayscale counterpart when requested.
This is the code (see JSFiddle for details):
$("img.color").hover(function(){
var li;
for (var i = 6; i <= 8; ++i) {
li = $("#img"+i).closest("li");
if (li.hasClass("show")) {
li.next().css("opacity", 1);
}
}
...
}, function() {
$(...).stop().animate({"opacity": "1"}, "slow", function(){
$(this).closest("li").next().css("opacity", 0);
});
});
Some annotations:
IDs (e.g. in HTML markup) only make sense if used no more than once ;)
You could make your code a lot more readable (and probably more efficient) if you group together jQuery selectors. So instead of $(img1).animate() and $(img2).animate() after another better use $([img1, img2].join(",")).animate().
Hope that helps... ;) Besides, if you don't already use it, I'd recommend you work with Firebug; it's a great tool to debug your JS code.

Javascript - Delay animate upon mouseleave

I'm using a simply Javascript that makes a menu slide out upon mouseenter then slide in upon mouseleave. However, when the mouseleaves the area, I would like the menu to remain in place for a few seconds and then slide in.
This is the code im using.
$('#nav').mouseleave(function()
{
$("#nav").animate({"left": "0"}, "1000");
$("#nav li a").css({ opacity: 0.7 });
$("#nav li.current a").css({ opacity: 1 });
});
I've search stack overflow and google, but haven't been able to get any of the solutions to work. I'm only new to JS
Any ideas?

Slightly better, if you hover again, before the animation is executed:
$('#nav').hover(function () {
clearTimeout(this.timer);
}, function () {
this.timer = setTimeout(function () {
$("#nav").animate({"left": "100"}, "1000");
$("#nav li a").css({ opacity: 0.7 });
$("#nav li.current a").css({ opacity: 1 });
}, 1000);
});

I'm a pretty big fan of the setTimeout() method.
http://www.w3schools.com/jsref/met_win_settimeout.asp
So I would do
$('#nav').mouseleave(function()
{
setTimeout( function(){
$("#nav").animate({"left": "0"}, "1000");
$("#nav li a").css({ opacity: 0.7 });
$("#nav li.current a").css({ opacity: 1 });},1000)
});

Use the .delay() function from the JQuery API: http://api.jquery.com/delay/
$("#nav").delay(3000).animate({"left": "0"}, "1000");
This waits 3000 milliseconds(3 seconds) before calling animate()