Hiding and Showing Elements
Hiding and showing elements can be done by applying three different effects:
- Instant hiding or showing ( hide(), show() and toggle() methods )
- Hide or show with a fading effect ( fadeIn(), fadeOut(), fadeToggle() and fadeTo() methods)
- Hide or show with a sliding effect ( slideDown(), slideUp() and slideToggle() methods )
Functions: hide(), show() and toggle()
The hide() and show() methods have two optional parameters - duration and callback
$(selector).hide(duration, callback) $(selector).show(duration, callback)
- duration parameter – can take the value "slow", "fast", "normal" or its value can be more precisely defined in milliseconds
- callback parameter – the name of the function to be executed after the effect
Here is an example of how you could use these functions:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery effects</title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#hideButton").click(function () {
$("#text").hide(1000, function(){
alert("The text is now hidden");
});
});
$("#showButton").click(function () {
$("#text").show(1000, function(){
alert("The text is now shown");
});
});
});
</script>
</head>
<body>
<button id="hideButton">Hide</button>
<button id="showButton">Show</button>
<p id="text">Hello, I am a paragraph of text!</p>
</body>
</html>
In this example, when the "Hide" button is clicked, the text inside the paragraph with the id text is hidden over a duration of 1000 milliseconds (1 second), and then an alert box is displayed saying "The text is now hidden". The same happens for the "Show" button, but in reverse - the text is shown, and then the alert box says "The text is now shown".
The toggle() method combines the actions of the hide() and show() functions, hiding visible elements and showing hidden elements. If an element has a CSS rule display: none;, the toggle() method will show it, and if it's visible it will hide it.
$(selector).toggle(duration,callback);
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("div").toggle();
});
});
</script>
Functions: slideDown(), slideUp() and slideToggle()
The slideDown(), slideUp() and slideToggle() methods are applied when it is necessary to add an opening and closing effect to an element.
$(selector).slideDown(duration, callback); $(selector).slideUp(duration, callback); $(selector).slideToggle(duration, callback);
These methods are used to create a sliding animation effect.
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("div").slideToggle();
});
});
</script>
In this example, when the slideToggle function is called, it toggles the visibility of the selected elements. If the divs were initially hidden, they will slide down and become visible. If they were initially visible, they will slide up and become hidden.
Functions: fadeIn(), fadeOut(), fadeToggle() and fadeTo()
The fadeIn(), fadeOut(), fadeToggle() and fadeTo() methods are applied when it is necessary to add a fading effect to an element.
$(selector).fadeIn(duration,callback); $(selector).fadeOut(duration,callback); $(selector).fadeToggle(duration,callback); $(selector).fadeTo(duration,opacity,callback);
Since the fading and opening effects are predominantly applied identically to the hide() and show() methods, examples have been omitted for simplicity.
The fadeTo() method differs in that it is possible to pass an additional parameter, opacity. With the opacity parameter, it is possible to define the percentage of transparency to which the element will be hidden or shown.
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("div").fadeTo(400, 0.5, function () {
$(this).css("background-color", "green");
});
});
});
</script>
In the above script, the fadeTo() method is applied on button click so that the method defines the duration of the effect for 400 milliseconds, transparency of 50%, and specifies a callback function that will paint the <div> element green after executing the animation or method.
JQuery animations
JQuery animations allow for the animation of all CSS properties that can have some intermediate value or are defined in certain units. For example, color, background-color, font-size, width, height, etc.
Animations are applied by defining the animate( { } ) method on the element to be animated.
Syntax for the function defining jQuery animations:
$(selector).animate( { parameters }, duration, easing, callback );
- parameter { parameters } – list of HTML element properties to animate (object with key/value pairs)
- parameter duration – defines the duration of the animation – takes values “fast", "slow", "normal“ or its value is precisely defined in milliseconds
- parameter easing - defines how the animation will take place, takes values 'swing' and 'linear'
- parameter callback - name of the function that will be executed after the animate() method is executed
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("div").animate({
'background-color': 'skyblue',
'width': 400,
'height': 600,
'opacity': 0.5
}, 5000, 'linear', function () {
$(this).fadeOut();
});
});
});
</script>
In the above function, multiple properties will be animated over a duration of 5000ms (5s), evenly throughout the entire animation (linear) and after the method execution, the element will disappear by applying the fadeOut() method in the callback function.