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.
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
I have tested the issue you provided about right floating and animation… The result was that everything is working fine and the floating div stays the the right side while animating.
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.
the entry is good!
$(“id”).animate({“height”: “toggle”}, { duration: 1000 }); is not properly works in IE 8. why?
Try to use:
$(“#id”).slideToggle(speed);
This will toggle the height from 0 to actual height OR reverse.
I visit regularly and always something interesting like this is posted. Thanks again.
Very nice 😉
Thanks for the this, it’s extremely extensive and useful!,do check out the link below
http://www.tutorials99.com
where all tutorials have a Higher page rank and professional.Very helpful for beginners…
What about if…
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 is my first time i visit here. I found so many interesting stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! Keep up the excellent work.
Thanks you very much! Wonderful slide!..
changing opacity of the div by mouse over on it:
$(document).ready(function(){
$(“div#ID-of-this-div”).hover(
function() {
$(this).stop().animate({“opacity”: “1”}, “slow”);
},
function() {
$(this).stop().animate({“opacity”: “0.4”}, “slow”);
});
});
thanks for sharing i was looking for this tutorial.