-
jQuery Animation Effects
jQuery animate() Method The jQuery animate() method is used to create custom animations. The animate() method is typically used to animate numeric CSS properties, for example, width, height, margin, padding, opacity, top, left, etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colors…
-
jQuery slideToggle() Method
The jQuery slideToggle() method show or hide the selected elements by animating their height in such a way that if the element is initially displayed, it will be slide up; if hidden, it will be slide down i.e. toggles between the slideUp() and slideDown() methods. Example Similarly, you can specify the duration parameter for the slideToggle() method like slideUp() and slideDown() methods to control the speed of…
-
jQuery Sliding Effects
jQuery slideUp() and slideDown() Methods The jQuery slideUp() and slideDown() methods is used to hide or show the HTML elements by gradually decreasing or increasing their height (i.e. by sliding them up or down). Example Like other jQuery effects methods, you can optionally specify the duration or speed parameter for the slideUp() and slideDown() methods to control how long the slide animation will run. Durations can be…
-
jQuery fadeToggle() Method
The jQuery fadeToggle() method display or hide the selected elements by animating their opacity in such a way that if the element is initially displayed, it will be fade out; if hidden, it will be fade in (i.e. toggles the fading effect). Example Similarly, you can specify the duration parameter for the fadeToggle() method like fadeIn()/fadeOut() method to control the duration…
-
jQuery Fading Effects
In this tutorial you will learn how to fade in and out elements using jQuery. jQuery fadeIn() and fadeOut() Methods You can use the jQuery fadeIn() and fadeOut() methods to display or hide the HTML elements by gradually increasing or decreasing their opacity. Example Like other jQuery effects methods, you can optionally specify the duration or speed parameter for the fadeIn() and fadeOut() methods to control how…
-
jQuery toggle() Method
The jQuery toggle() method show or hide the elements in such a way that if the element is initially displayed, it will be hidden; if hidden, it will be displayed (i.e. toggles the visibility). Example Similarly, you can specify the duration parameter for the toggle() method to make it animated like the show() and hide() methods. Example Similarly, you can also specify a callback…
-
jQuery Show and Hide Effects
jQuery show() and hide() Methods You can show and hide HTML elements using the jQuery show() and hide() methods. The hide() method simply sets the inline style display: none for the selected elements. Conversely, the show() method restores the display properties of the matched set of elements to whatever they initially were—typically block, inline, or inline-block—before the inline style display: none was applied to them. Here’s is an example. Example You can optionally specify the duration…
-
The submit() Method
The jQuery submit() method attach an event handler function to the <form> elements that is executed when the user is attempting to submit a form. The following example will display a message depending on the value entered when you try to submit the form. Example Tip: A form can be submitted either by clicking a submit button, or by pressing…
-
Keyboard Events
A keyboard event is fired when the user press or release a key on the keyboard. Here’re some commonly used jQuery methods to handle the keyboard events. The keypress() Method The jQuery keypress() method attach an event handler function to the selected elements (typically form controls) that is executed when the browser receives keyboard input from the user. The…
-
jQuery Events
What are Events Events are often triggered by the user’s interaction with the web page, such as when a link or button is clicked, text is entered into an input box or textarea, selection is made in a select box, key is pressed on the keyboard, the mouse pointer is moved etc. In some cases,…