Teach with us

What are the options for jQuery Animated Effects?

jQuery animated effected can be achieved with methods such as animate, slideDown(), slideToggle(), etc. This created an animation effect in an HTML web page using jQuery. The following table lists down some of the important methods to create different kind of effects:

S. No
Methods & Description
1.
animate( params, [duration, easing, callback] )
A function for making custom animations.
2.
fadeIn( speed, [callback] )
Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
3.
fadeOut( speed, [callback] )
Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.
4.
fadeTo( speed, opacity, callback )
 Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
5.
toggle( )
Toggle displaying each of the set of matched elements.

Here’s an example of slideToggle() method, which toggles the visibility of all matched elements by adjusting their height and firing an optional callback after completion.

Here is the description of all the parameters used by this method −

  • speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback − This is optional parameter representing a function to call once the animation is complete.

Example

You can try to run the following code to learn how to work with slideToggle() method to create an animation effect:

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
       
      <script>
   
         $(document).ready(function() {

            $("#toggle").click(function(){
               $(".target").slideToggle( 'slow', function(){
                  $(".log").text('Toggle Transition Complete');
               });
            });
               
         });
      </script>
       
      <style>
         p {
             background-color:#bca;
             width:200px;
             border:1px solid green;
         }
      </style>
   </head>
   
   <body>

      <p>Click on the following button:</p>
      <button id = "toggle"> Toggle </button>

      <div class = "target">
         <img src = "../images/jquery.jpg" alt = "jQuery" />
      </div>
       
      <div class = "log"></div>
 
   </body>
</html>
Updated on 12-Dec-2019 07:53:30

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements