jQuery Animate
Here I will mention how to use the jquery animate function and the usability and flexibility of it.
The syntax of this function is:
$.animate(options, settings, callback);
/* you can replace setting with duration (in milliseconds) or words: 'slow', 'normal' or 'fast'.
callback is optional */
Below is a list of popular and most used animation:
- increasing/decreasing width and height
- moving or scrolling html element
- changing opacity
- scrolling window
Now let me explain each in an example.
Follow up:
increasing/decreasing width and height
Increasing div width with animation has a simple code:
having a div with 100% width and height of 250px
$('div').animate({'width':'10%','height':'50px'},1500); /* This will decrease the width to 10% and height to 50 pixels with animation. */
As you can see, we may use one property or more than one property separated with commas.
see it in action:
moving or scrolling html element
To change html element's position with animate, you can change the css top and left properties as follows:
$('div').animate({top:'100px', left:'100px'},1500);
see it in action:
changing opacity
Changing opacity of html element can be animated as follows:
$('div').animate({opacity:0.1},1000); /* Changes the opacity from 1 to 0.1 while 1 is the normal view. */
see it in action:
scrolling window
This item was added to this blog before in Scroll window smoothly in jQuery
$('html, body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 2000);
}
You can do more with this function. Try more properties.
See also:
jQuery Animate - Advanced
13 comments
Always make sure you have a background color for all children nodes containing text node, or you will have serious issues with XP Media Center Edition, XP Tablet PC
and Vista for Internet Explorer 6 and 7 when ClearType fonts is enabled.
On Vista, if you have ClearType fonts, then what will happen is that piece of text will be non-ClearType, while the other will be.
So if you have a bunch of ClearType text nearby
and one animated over opacity that one will look weird.
On MCE/TabletPC, the font becomes bold and bad kerning, simply just horrible.
Instead of * you can specify span or p
The problem arise as this:
[div][span]asdf[/span][/div]
What is the backgroundColor for span ?
It's transparent.
How do I do opacity on text over transparent on whatever div background in Internet Explorer with ClearType...
IE has no clue and the font rendering is horrible,
with ClearType off everything works fine,
with XP SP2 + ClearType + IE6 == no problem,
XP SP2 + ClearType + IE6 + MediaCenterEdition package == problem.
If you have something like this:
[div id='container' style='background:blue;width:200px;float:left;']
[div id='animateMe' style='background:white;margin:5px 5px;width:180px;float:left;'][div style='text-align:center;']
[span]asdf[/span][/div][/div][/div]
$('#animateMe').animate({opacity:0.8},1000);
You'll run into problems too.
span is transparent.
Worst, the only way to get that right in my case was to wrap the container into a table and force a white background on that table, tbody and td for IE to behave correctly...
to really get the whitish effect I had with Firefox
and normal XP2/IE6
You can look on Google for this "opacity cleartype"
http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html
BTW, even alpha=100 does not fix it, as soon as alpha is there you get the problem.
Ive been playing with animate, but I am not sure if this is an issue with the animate function or the way i am coding it.
I have a div i animate to widen to a new width and it slides nicely. However the containing div with float:right does not move to the new right side edge of the animated div, so it leaves a gap. Any ideas?
$('.gotoPortfolio').click(function() {
$('.barslide').animate({width:750},1500);
return false;
});
Thanks for the comment
In this case, while you are experiencing a problem, you may have a CSS conflict.
Please give a chance to see the code to provide you with the solution.
$("#id").slideToggle(speed);
This will toggle the height from 0 to actual height OR reverse.
http://www.tutorials99.com
where all tutorials have a Higher page rank and professional.Very helpful for beginners…
1. i have a div display:none,
2. i want to use the efect of slideDown() to show it,
3. but starting from a height of 100px (dynamic value)
4. to a height set by the content within?
This post has 1 feedback awaiting moderation...
Comment feed for this post