jQuery

In jQuery, there are two way to change the width of an element.

One way is using .css('width') and other way is using .width().

For example:

$('#mydiv').css('width','300px');

$('#mydiv').width(100);

★ The difference in .css('width') and .width() is the data type of value we specify or return from the both functions.

★ In .css('width') we have to add "px" in the width value while in .width() we don't have to add.

★ When you want to get the width of "mydiv" element then .css('width') will return '300px' while .width() will return only integer value 300.

slideToggle() effect is used to give animated sliding effect to an element.

Syntax:

slideToggle([ duration] [, easing] [, callback])

"duration" is the number specifying how long the animation will run.

"easing" is the string which specify the function for the transition.

"callback" is the function which we want to run once the animation is complete.

If the element is visible then this effect will slide the element up side and make it completely hidden. If the element is hidden then slideToggle() effect will slide it down side and make it visible.

We can specify the toggle speed with this effect.

For example:

$("#clickme").click(function(){

$("#mydiv").slideToggle("slow", function(){

//run after the animation is complete.

});

});

Refer the following example:

$(document).ready(function(){

$('#clickme').click(function(){

alert($(this).text());

alert(this.innerText);

});

});

★ this and $(this) references the same element but the difference is that "this" is used in traditional way but when "this" is used with $() then it becomes a jQuery object on which we can use the functions of jQuery.

★ In the example given, when only "this" keyword is used then we can use the jQuery text() function to get the text of the element, because it is not jQuery object. Once the "this" keyword is wrapped in $() then we can use the jQuery function text() to get the text of the element.