Develop Reference

JQuery synchronous animate not working

I have a jquery synchronous animation with window.setInterval
window.setInterval(function(){
$("#pageflip img").stop().animate({width:'+=2px',height:'+=2px'}, 800,null,function(){
$("#pageflip img").stop().animate({width:'-=2px',height:'-=2px'}, 800);
});
},1600)
What happening here when I loose focus from page window (switch tab or open another application, not viewing animation page) callback function is not called, image width and height always increasing (not back to its normal position) as long as I remain in same page window it is working fine. I am newbie in jquery any help please?
Sorry for my bad english.

.animate( properties [, duration ] [, easing ] [, complete ] ).
You have the easing parameter value set to null, it should be left empty or set to linear (more options when using the easing plugin).
Easing :
The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.
Remove the ,null or replace it with Linear/swing, before your callback. By default the easing is set to swing.
Refer to the docs for more details.

jQuery UI effects

How can I show a div growing from top and bottom with jqueryui effect?
I tried this code:
$('div#my').show('clip');
but it does not work.

Does slideUp or slideDown help you?
$('div#my').slideUp('slow');
$('div#my').slideDown('slow');

You can actually use animation without jQuery UI using .show( [duration] [, easing] [, callback] ).
The code for this would be $('div#my').show('slow');
For using custom effects such as clip, I would think your code would work as expected, but if not maybe your path to your jquery UI is off?
Here is a demo of your code working as expected: http://jsfiddle.net/ysHgp/

An other way is $('div#my').animate({ height: heightOfDiv_my }, "fast");

rewrite this code to flying with easing not fadein

How to rewrite this code, so it would fly in with easing not just fade in.
Code -
jQuery('#swiftslider-slide-'+newSlide).addClass('active').fadeIn('300');
Could you give me a full example? I understand I must use .animate() but if I do like this -
jQuery('#swiftslider-slide-'+newSlide).addClass('active').animate({opacity: "show"}, { duration: "slow", easing: "easein" });;
it doesn't work.
Hope you will be able to help me.

Thanks, Sparky672.
It's not working because, by default, there's no such thing as easein
in jQuery. Without using your own function or plugin, the only two
default jQuery animation easing options are swing and linear. See this
question to learn more about easing functions.

Easing on Fixed Position Jquery

Is there anyway to add a easing to a fixed element?, I've been looking around and I can't find an answer. I really don't know how it would be, maybe something like...
$(window).scroll(function() {
$("#form").animate({position:"fixed", easing: 'swing'});
});
Any help will be appreciated ^ ^ Thanks!
Edit:Pretty much what I'm looking for is when user scrolls, the fixed element obviously will follow the window position, but I want to add is a little delay in comparison to scroll action with an easing effect

You'd have to make that div absolute positioned, z-indexed and without parent, then move it on the scroll event. You can know the number of pixels scrolled with scrollTop(). Something like this:
$(window).scroll(function(){
var offset=100;
//stop is called so easing doesn't affect while it is still scrolling.
$("form").stop().animate({top:($(window).scrollTop()+offset)+"px"}, 300, 'swing');
});

Try this instead:
$("#form").animate({position:"fixed"}, 300, 'swing');

From the jQuery api ( http://api.jquery.com/animate/ ):
The only easing implementations in the jQuery library are the default,
called swing, and one that progresses at a constant pace, called
linear. More easing functions are available with the use of plug-ins,
most notably the jQuery UI suite.
$("form").animate({position:"fixed"}, 300, 'swing'); //swing being default

JQuery animation: Is it possible to change speed during the animation?

I want to move a div down a page, and I want it to slow down as it reaches the target.
I tried using call back with recursive func but it doesn’t look smooth:
function MovePanel() {
sidePanel.animate({
"marginTop": newCurrTop
}, moveSpeed, function () {
MovePanel();
});
}
Is it possible to slow down an JQuery animation?
If not what are the alternatives?
Thanks.

The animate method takes a 3rd param called "easing"; learn about it here:
http://api.jquery.com/animate/

You might want to check this out: http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations
Easing can really bring life to an
effect. Easing controls how an
animation progresses over time by
manipulating its acceleration.