We Keep Coding

css3 animation + slidetoggle don't work

The airplane animation block (he flies from side to side - forever).
Block container can be collapsed and expanded using jquery:
onclick = "$('.wrap').slideToggle('normal'); return false;"
So, if you collapse and expand the block, the animation stops, how can I fix it?
Emulation for my question:
http://learn.javascript.ru/play/eEkfi

After the .knopka is pressed I think you need to call go(); again:
zminu HTML
<div class="knopka">button minimize/maximize</div>
i jQuery
$('.knopka').on('click', function () {
$('.wrap').slideToggle('normal', function () {
// This is a callback function
// put code here that you need to execute after sliding is finished
go();
});
return false;
});
JSFIDDLE Demo
It's not perfect but I think you will get the idea.

JQuery fadeOut callback function is being executed after fadeOut is over

On a click of a button, i'm trying to fadeOut an image, and while it is fading out i'm changing the source of the image. And then i'm using the fadeIn to show the new image. This works fine in Chrome, and firefox. However, in ie10, the image fades out, fades in, and then the new image appears. I can't find a a fix for it. I've tried to prolong the duration of fadeOut, fadeIn. I've tried using setTimeout function. i've tried using promise().done() function. I've tried using Jquery UI's hide/show w/ slide effect, and same issues are appearing. Nothing seems to be working. I'd really appreciate any help. Thanks
me.$el.find('#printable-detail-static-imageRight').fadeOut('fast', function(){
me.$el.find('#printable-detail-static-imageRight').attr('src', me.options.samplePrints[k+i]);
me.disableNext();
});
me.$el.find('#printable-detail-static-imageRight').fadeIn('slow')

I'm pretty sure you need to put the .fadeIn method inside the callback function in order for it to be affected by the callback function. In fact, I'd add another callback function to the .attr method to make sure that it fades back in only after the src has been changed.
Here's a jsFiddle I wrote to illustrate what I mean.

i am on a mac, but does this code works in ie ? jsFiddle
.html
<div id="content">Promises</div>
<button id="click">start animation</button>
.js
$("#click").on("click", function () {
$('#content').fadeOut({
duration: 1000,
// run when the animation is complete
complete: function () {
$("#content").append($("<div>").addClass("fakeimg"));
},
// run when the animation is complete +
//it's promise is resolved
done: function () {
$('#content').fadeIn(1000);
}
});
});

this works:
me.$el.find('#printable-detail-static-imageRight').animate({
opacity:0
}, {
duration: 700,
step: function(now, fx){
if(fx.pos > 0.40 && fx.pos < 0.5){
$(this).attr('src', me.options.samplePrints[k+i]);
me.disableNext();
}
if (fx.pos ==1) {
$(this).animate({
opacity:1
}, 200);
}
}
});

Changing the order of events in Jquery

So I created some pop-up code that will contain specific information from each link clicked in the pop-up. When closed, the content in the pop-up div gets deleted. Here is my code:
var $content = $('#popupcontent');
var $window = $('#popupwindow');
$('.open').click(function(){
//alert('runnning');
var a = $(this).contents('span');
$content.append(a);
$window.fadeIn(300);
});
$('.close').click(function(){
//alert('running');
var a = $content.contents('span');
$window.fadeOut(300);
$('#popupcontent span').remove();
});
My issue is that it is somehow removing the content before fading out, so the viewer can then see that the pop-up container goes blank. How can I make it so that it will surely fade out first and then remove the content? Here is a Jsfiddle to illustrate that: http://jsfiddle.net/kAdQK/4/

You may want to utilize the complete call back argument for the fadeout method, to remove the element once fadeout is completed. With your current code it will start the fadeout animation and then immediately remove the content without waiting for fadeout animation to complete, hence you get the visual effect that you are seeing now. Using the callback you make sure that it gets executed once the animation is complete.
$window.fadeOut(300, function () {
$('#popupcontent span').remove();
});
Syntax
.fadeOut( [duration ] [, complete ] )
Fiddle

You can use the animation complete to remove your element after the fadeout ends.
The following code will ensure that #popupcontent is removed only after it's faded out
$window.fadeOut('slow', function() {
$('#popupcontent span').remove();
});

Just use a setTimeout();
$window.fadeOut(300);
setTimeout(function(){
$('#popupcontent span').remove();},2000);
Example Here

jQuery auto refresh div malfunctioning

Does anyone know what I'm doing wrong?
Basically I'm after loading content (an image) into a div tag, and then refreshing it every x seconds. So this is what I came up with, and it works great until it fades the file back in to which it does a manual refresh.
The current process looks like the following:
Load ... fade out, fade in & then disappears and reappears a few seconds later.
What should be happening is the following:
Load ... fade out, fade in ... fade out, fade in ... (you get the idea, looped)
The code:
$(document).ready(function () {
$("#webcam").load("image.html").fadeIn("slow");
var refreshId = setInterval(function() {
$("#webcam_img").fadeOut("slow");
$("#webcam").load('image.html');
$("#webcam_img").fadeIn("slow");
}, 5000);
});
The online file can be found here: http://colourednoise.co.uk/scripts/webcam.htm
Thank you

load is asynchronous. You are calling fadeIn on an element which is then replaced by the load. You need to fadeIn within the callback of load to ensure that the element exists.
$("#webcam").load('image.html', function(){
$("#webcam_img").fadeIn("slow");
});

Try moving your fadein inside the callback function for the fadeOut so it waits until fadeout is complete first
$("#webcam_img").fadeOut("slow",function(){
$("#webcam").load('image.html');
$("#webcam_img").fadeIn("slow");
});
Here's the full example
$(document).ready(function () {
$("#webcam").load("image.html").fadeIn("slow");
var refreshId = setInterval(function() {
$("#webcam_img").fadeOut("slow",function(){ // <-- added callback function
$("#webcam").load('image.html'); // now this
$("#webcam_img").fadeIn("slow"); // and this waits for fadeOut to complete first
});
}, 5000);
});

Here is a slightly different way to do it, ensuring that each image is fully loaded before the next refresh gets queued:
$(document).ready(function () {
$("#webcam").load("image.html").fadeIn("slow", function () { setTimeout(refreshImage, 5000) });
function refreshImage() {
$("#webcam_img").fadeOut("slow",function(){
$("#webcam").load('image.html');
$("#webcam_img").fadeIn("slow", function() { setTimeout(appendDateToBody, 5000) });
});
}
});

setTimeout speeds up with multiple tabs

I’m having a setTimeout problem similar to this one. But that solution doesn't help me since I can’t use php in my file.
My site has a slider with a list of images that move every 8 seconds.However, when I have opened a few tabs in the browser and then switch back again, it goes nuts.
The slider proceeds to move the images one after the other immediately without the 8 second timedelay.
I'm only seeing it in Chrome and the latest Firefox.
**EDIT: I checked with console.log() and the setTimeout returns the same number before and after the clearTimeout. Not sure why. Maybe that also has something to do with it? **
EDIT 2: I added a fiddle: http://jsfiddle.net/Rembrand/qHGAq/8/
The code looks something like:
spotlight: {
i: 0,
timeOutSpotlight: null,
init: function()
{
$('#spotlight .controls a').click(function(e) {
// do stuff here to count and move images
// Don't follow the link
e.preventDefault();
// Clear timeout
clearTimeout(spotlight.timeOutSpotlight);
// Some stuff here to calculate next item
// Call next spotlight in 8 seconds
spotlight.timeOutSpotlight = setTimeout(function () {
spotlight.animate(spotlight.i);
}, 8000);
});
// Select first item
$('#spotlight .controls a.next:first').trigger('click');
},
animate: function(i)
{
$('#spotlight .controls li:eq(' + (spotlight.i) + ') a.next').trigger('click');
}
}

From the jQuery documentation:
Because of the nature of requestAnimationFrame(), you should never
queue animations using a setInterval or setTimeout loop. In order to
preserve CPU resources, browsers that support requestAnimationFrame
will not update animations when the window/tab is not displayed. If
you continue to queue animations via setInterval or setTimeout while
animation is paused, all of the queued animations will begin playing
when the window/tab regains focus. To avoid this potential problem,
use the callback of your last animation in the loop, or append a
function to the elements .queue() to set the timeout to start the next
animation.

I finally found my answer and it’s not at all what I was expecting.
It seems the culprit is jQuery’s .animate(), which I use to move the images in the slider.
I calculate and move my images positions with this:
$('.spotlight-inner')
.animate(
{ left: scrollToVal },
{duration: 'slow'}
)
;
Now the problem seems to be that in some browsers, after you switch to a new tab and back, jQuery’s .animate() saves up the animations and fires them all at once. So I added a filter to prevent queueing. That solutions comes from CSS-Tricks.com :
$('.spotlight-inner')
.filter(':not(:animated)')
.animate(
{ left: scrollToVal },
{duration: 'slow'}
)
;
The first slide you see when you go back can act a little jumpy but it’s better than the superspeed carousel from before.
Fiddle with the full code here

There is an easier way using the jquery animate queue property:
$(this).animate({
left: '+=100'
}, {duration:500, queue:false});

I don't know if this will help you, but it helped me with my slideshow. What I did was everytime I called an animation that was supposed to happen at a set interval because of the setTimeout, I called clearQueue() which would get rid of any other animations that had been set to happen. then i'd call the animation. That way when you come back to that tab, you don't have all these animations queued up and it goes crazy. at max you'll only have one set up.
So something like this:
spotlight.timeOutSpotlight = setTimeout(function () {
spotlight.clearQueue(); // get rid of other instances of the animation
spotlight.animate(spotlight.i);
}, 8000);
It may not work in all cases (depending on timing), but I hope that helps somebody!

You must also think you use clearTimeout.
As you call setTimeout function it returns an ID you can save this ID in a variable like
timeoutID = setTimeout(function () {
spotlight.animate(spotlight.i);
}, 8000);
and before setting a new timeout you can call the function like
clearTimeout(timeoutID)

My suspicion is that the browser queues input events like 'click' but only fires them when the tab where the event occurs actually has focus.
Perhaps you should try calling your click callbacks directly instead of using trigger('click').
Something like this:
spotlight: {
i: 0,
timeOutSpotlight: null,
clickFunc: function(element) {
// do stuff here to count and move images
// Clear timeout
clearTimeout(spotlight.timeOutSpotlight);
// Some stuff here to calculate next item
// Call next spotlight in 8 seconds
spotlight.timeOutSpotlight = setTimeout(function () {
spotlight.animate(spotlight.i);
}, 8000);
},
init: function()
{
$('#spotlight .controls a').click(function (e) {
// Don't follow the link
e.preventDefault();
spotlight.clickFunc(this);
});
// Select first item
spotlight.clickFunc($('#spotlight .controls a.next:first'));
},
animate: function(i)
{
var element = $('#spotlight .controls li:eq('+spotlight.i+') a.next');
spotlight.clickFunc(element);
}
}

What version of jQuery are you running? Apparently this problem was 'fixed' for version 1.6.3 - they reverted the change that caused this to happen. Discussions here and here.
Though this issue will likely have to be addressed in the future, it seems as though we're off the hook for now.