Ticker

6/recent/ticker-posts

jQuery Effects Methods

VINNER TECH June 21, 2023
jQuery Effects Methods


Introduction jQuery is a popular JavaScript library that simplifies HTML document traversal, event handling, and animation. It provides a wide range of methods to create interactive and dynamic effects on web pages. This documentation focuses on the jQuery Effects Methods, which allow you to apply various visual effects to elements.

Table of Contents

  1. .hide()

    • Description
    • Syntax
    • Example
    • Explanation

  2. .show()

    • Description
    • Syntax
    • Example
    • Explanation

  3. .toggle()

    • Description
    • Syntax
    • Example
    • Explanation

  4. .fadeIn()

    • Description
    • Syntax
    • Example
    • Explanation

  5. .fadeOut()

    • Description
    • Syntax
    • Example
    • Explanation

  6. .slideUp()

    • Description
    • Syntax
    • Example
    • Explanation

  7. .slideDown()

    • Description
    • Syntax
    • Example
    • Explanation

1. .hide()

Description: The .hide() method is used to hide the selected elements by setting their display property to "none". This effect can be animated by providing a duration.

Syntax:

scss
$(selector).hide(duration, easing, complete);

Example:

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#hideButton").click(function(){
        $(".targetElement").hide(1000);
      });
    });
  </script>
</head>
<body>
  <button id="hideButton">Hide Element</button>
  <div class="targetElement">This element will be hidden.</div>
</body>
</html>

Explanation: In the above example, when the "Hide Element" button is clicked, the .hide() method is triggered with a duration of 1000 milliseconds (1 second). The .targetElement div will gradually disappear over the specified duration.

2. .show()

Description: The .show() method is used to display hidden elements by setting their display property to the default value (e.g., "block" for a div). It can also be animated by providing a duration.

Syntax:

scss
$(selector).show(duration, easing, complete);

Example:

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#showButton").click(function(){
        $(".targetElement").show(1000);
      });
    });
  </script>
</head>
<body>
  <button id="showButton">Show Element</button>
  <div class="targetElement" style="display: none;">This element will be shown.</div>
</body>
</html>

Explanation: In the above example, when the "Show Element" button is clicked, the .show() method is triggered with a duration of 1000 milliseconds. The .targetElement div, initially hidden with display: none;, will gradually appear over the specified duration.

3. .toggle()

Description: The .toggle() method is used to toggle the visibility of elements. If an element is hidden, it will be displayed, and if it is visible, it will be hidden.

Syntax:

scss
$(selector).toggle(duration, easing, complete);

Example:

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#toggleButton").click(function(){
        $(".targetElement").toggle(1000);
      });
    });
  </script>
</head>
<body>
  <button id="toggleButton">Toggle Element</button>
  <div class="targetElement">This element will be toggled.</div>
</body>
</html>

Explanation: In the above example, when the "Toggle Element" button is clicked, the .toggle() method is triggered with a duration of 1000 milliseconds. The .targetElement div will toggle between hidden and visible states over the specified duration.

4. .fadeIn()

Description: The .fadeIn() method is used to fade in the selected elements by gradually increasing their opacity from 0 to 1. This effect can be animated by providing a duration.

Syntax:

scss
$(selector).fadeIn(duration, easing, complete);

Example:

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#fadeInButton").click(function(){
        $(".targetElement").fadeIn(1000);
      });
    });
  </script>
</head>
<body>
  <button id="fadeInButton">Fade In Element</button>
  <div class="targetElement" style="opacity: 0;">This element will fade in.</div>
</body>
</html>

Explanation: In the above example, when the "Fade In Element" button is clicked, the .fadeIn() method is triggered with a duration of 1000 milliseconds. The .targetElement div, initially hidden with opacity: 0;, will gradually fade in by increasing the opacity over the specified duration.

5. .fadeOut()

Description: The .fadeOut() method is used to fade out the selected elements by gradually decreasing their opacity from 1 to 0. This effect can be animated by providing a duration.

Syntax:

scss
$(selector).fadeOut(duration, easing, complete);

Example:

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#fadeOutButton").click(function(){
        $(".targetElement").fadeOut(1000);
      });
    });
  </script>
</head>
<body>
  <button id="fadeOutButton">Fade Out Element</button>
  <div class="targetElement">This element will fade out.</div>
</body>
</html>

Explanation: In the above example, when the "Fade Out Element" button is clicked, the .fadeOut() method is triggered with a duration of 1000 milliseconds. The .targetElement div will gradually fade out by decreasing the opacity over the specified duration.

6. .slideUp()

Description: The .slideUp() method is used to slide up (hide) the selected elements by animating the height of the element to 0.

Syntax:

scss
$(selector).slideUp(duration, easing, complete);

Example:

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#slideUpButton").click(function(){
        $(".targetElement").slideUp(1000);
      });
    });
  </script>
</head>
<body>
  <button id="slideUpButton">Slide Up Element</button>
  <div class="targetElement" style="height: 100px; background-color: lightblue;">This element will slide up.</div>
</body>
</html>

Explanation: In the above example, when the "Slide Up Element" button is clicked, the .slideUp() method is triggered with a duration of 1000 milliseconds. The .targetElement div will slide up and hide by animating its height to 0 over the specified duration.

7. .slideDown()

Description: The .slideDown() method is used to slide down (show) the selected elements by animating the height of the element from 0 to its original height.

Syntax:

scss
$(selector).slideDown(duration, easing, complete);

Example:

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#slideDownButton").click(function(){
        $(".targetElement").slideDown(1000);
      });
    });
  </script>
</head>
<body>
  <button id="slideDownButton">Slide Down Element</button>
  <div class="targetElement" style="height: 0; background-color: lightblue;">This element will slide down.</div>
</body>
</html>

Explanation: In the above example, when the "Slide Down Element" button is clicked, the .slideDown() method is triggered with a duration of 1000 milliseconds. The .targetElement div will slide down and show by animating its height from 0 to its original height over the specified duration.

Conclusion This documentation covered various jQuery Effects Methods that allow you to apply visual effects to elements on web pages. Each method provides different ways to hide, show, toggle, fade, or slide elements with customizable durations and easing effects. By using these methods, you can enhance the user experience and make your web pages more interactive and engaging.

Tags:

Post a Comment

0 Comments