jQuery provides you with many built-in methods that you can use right away. Among them are methods for showing/hiding elements in a number of ways, including revealing images with a sliding motion (* gradually increasing their height. Translator’s note) and gradually showing and disappearing an element. You also have several toggle methods for changing the visibility of an element.
Taking the general principles of jQuery as an example, we first get the element we need using CSS selectors. Then we simply call any of the built-in methods.
Although most methods can be called without passing any arguments, you might often need to customize their functionality. Each method takes at least the speed and callback parameters.
Speed specifies the duration of the animation in seconds. You can pass string values including “slow”, “normal”, or “fast”, or you can be more precise and specify the time in milliseconds.
callback – a function that runs immediately after the animation is complete. You can use it to do anything you want: quietly execute an AJAX request, refresh another part of the user interface, etc. It’s limited only by your imagination.
Below is a list of methods that come with jQuery:
show/hide – methods for showing or hiding an element. The method takes speed and callback as parameters.
toggle – a method that changes the visibility of an element depending on the current state of the element, that is, if the element is hidden, it is displayed, and vice versa. Uses the show or hide methods.
slideDown/slideUp – speak for themselves. They change the height of the element to create the effect of showing or hiding the element by sliding.
slideToggle – the same as the toggle method, except that it uses the slideDown/slideUp methods to show or hide elements.
fadeIn/fadeOut – they change the transparency of the element of interest to create the effect of gradual appearance/disappearance.
fadeTo – changes the transparency of the element according to the value passed. Obviously, it accepts an additional opacity parameter, and when passed 0, the element will be completely transparent, and when passed 1, it will be completely opaque.
As an additional feature, there is an alternative implementation of the above toggle method, in which it receives an expression as a parameter, depending on the value of which it decides whether to display or hide the element.
For example, if you wanted to change the visibility of only list items with the effect class, your code would look like this:
$("li").toggle( $(this).hasClass("effect") );Simply put, the toggle function checks the value of the expression passed to it, and if it is true, it changes to the opposite. Otherwise, it remains the same. The expression we passed here checks whether the element has a certain class.
