Top 3 Products & Services
| 1. 2. 3. |
Dated: Dec. 24, 2012
Related Categories
CSS
Here we don’t have to explain the purpose in detail. These methods are used to manage CSS element values.
.CSS()
Returns or sets the value of any CSS property in the element
| 1 | // Returns the value |
| 2 | $('p').css('color'); |
| 3 | |
| 4 | // sets the value |
| 5 | $('p').css('color', '#FFE'); |
.HEIGHT()
Returns or sets the height of the element
| 1 | // Returns the height |
| 2 | $('#mydiv').height(); |
| 3 | |
| 4 | // sets the height |
| 5 | $('#mydiv').height(200); |
The difference between getting height by using .height() method and by using .css('height') is that the .css() method returns the value with the unit of measure (450px),while .height() returns only a numerical value.
.INNERHEIGHT()
Returns the height of the element including padding (if it is set)
.OUTERHEIGHT()
Returns the height of the element including (if there are any) margins, borders and padding
.WIDTH(), .INNERWIDTH(), .OUTERWIDTH()
Does the same as the height methods, only it returns the width of the element.
.OFFSET()
Returns or sets the coordinates of the element compared to the position in the document (top and left)
| 1 | // first we have to assign an offset element to a string |
| 2 | var offset = $('#mydiv').offset(); |
| 3 | // then through him return the top and left coordinates |
| 4 | offset.left; |
| 5 | offset.top; |
| 6 | |
| 7 | // sets the top and left coordinates |
| 8 | $('#mydiv').offset({top:200, left:30}); |
.POSITION()
Returns the coordinates of the element compared to the position in the parent element (top i left)
| 1 | /* like in offset first we the element position to a string |
| 2 | and then read the coordinates from him */ |
| 3 | var pos = $('#mydiv').position(); |
| 4 | pos.left; |
| 5 | pos.top; |
Effects
jQuery has a few techniques for animating content on a web page. These include simple, standard animations that are often used, but also sophisticated effects custom for your needs.
.ANIMATE()
Executes an animation over one or multiple given CSS values. As the first value it takes given CSS values, as the second it takes the speed of execution measured in milliseconds, the third value is optional and can represent the way of the animation execution,and the fourth represents the callback function that will be triggered after the execution of the animation.
| 1 | $('#someElement').animate( |
| 2 | {width : 100, opacity : 0.5}, |
| 3 | 500, |
| 4 | 'linear', |
| 5 | function() { $(this).after('Animation complete.'); } |
| 6 | ); |
.FADEIN()
Animates the transparency of an element from any of the values that on 1 (short for using .animate() method just for opacity value)
| 1 | $('#someElement').fadeIn(500, function(){ |
| 2 | // function for executing after the animation is finished |
| 3 | }); |
.FADEOUT()
Opposite of .fadeIn(),animates the transparency of the element on 0
| 1 | $('#someElement').fadeOut(); |
.FADETO()
Opposite of .fadeIn(), animates the transparency of the element on 0. As the first value it takes the duration of the animation in milliseconds, as the second value the desired visibility of the element. And the third method is optional and represents the callback function.
| 1 | $('#someElement').fadeTo(1000, 0,5, function() { |
| 2 | // function for executing after the animation is done |
| 3 | }); |
.FADETOGGLE()
A combination of .fadeIn() and .fadeOut(),animates the transparency of the element from 0 to 1 and reverse. It takes the speed of execution, the effect of the animation and the callback function as values.
| 1 | $('#someElement').fadeToggle(1000, function() { |
| 2 | // function for executing after the animation is done |
| 3 | }); |
.SHOW()
Reveals a hidden element with simultaneous transparency animation, and also width and height animation of the element.
| 1 | $('#someElement').show(1000, function() { |
| 2 | // function for executing after the animation is done |
| 3 | }); |
.HIDE()
Opposite of .show() method, hides the element with simultaneous animation of the transparency, width and height.
| 1 | $('#someElement').hide(1000, function() { |
| 2 | // function for executing after the animation is done |
| 3 | }); |
.TOGGLE()
A combination of .show() and .hide() methods, reveals or hides the element with simultaneous animation of the transparency width and height of the element..
| 1 | $('#someElement').toggle(1000, function() { |
| 2 | // function for executing after the animation is done |
| 3 | }); |
.SLIDEDOWN()
Reveals the hidden element by increasing it’s height.
| 1 | $('#someElement').slideDown(1000, function() { |
| 2 | // function for executing after the animation is done |
| 3 | }); |
.SLIDEUP()
Opposite to .slideDown(), hides the element by decreasing it’s height.
| 1 | $('#someElement').slideUp(1000, function() { |
| 2 | // function for executing after the animation is done |
| 3 | }); |
.SLIDETOGGLE()
A combination of .slideDown() and .slideUp() methods, hides or reveales the element by animating it’s height.
| 1 | $('#someElement').slideToggle(1000, function() { |
| 2 | // function for executing after the animation is done |
| 3 | }); |
.STOP()
Stops any animation of the element that is currently happening
| 1 | $('#someElement').stop(); |
Everything here is free, and we hope you like our work and tutorials. If you do, feel free that you link to this tutorial on your website, blog or anywhere else where do you think is appropriate. Let knowledge be available to all.
If you missed any of the tutorials about jQuery, you can see them in the list below.
Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!
 Previous Article |  Next Article |