Teach with us

How to increase the duration of jQuery effects?

jQueryWeb DevelopmentFront End Technology

To increase the duration of jQuery effects, set the optional speed parameter. The values include, slow, fast, milliseconds, etc. The fast value is used to increase the duration.

Let us see an example with fadeIn() jQuery method. The fadeIn( ) method fades in all matched elements by adjusting their opacity 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", "def", 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.

You can try to run the following code to increase the duration of jQuery effect −

Example

Live Demo

<html>
  <head>
    <title>The jQuery Example</title>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script language = "javascript">
    $(document).ready(function() {
      $("#in").click(function(){
        $(".target").fadeIn( 'fast', function(){
          $(".log").text('Fade In Transition Complete');
        });
      });
      $("#out").click(function(){
        $(".target").fadeOut( 'slow', function(){
          $(".log").text('Fade Out Transition Complete');
        });
      });
   });
</script>
<style>
  p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
  <p>Click on any of the buttons</p>
  <button id = "out"> Fade Out </button>
  <button id = "in"> Fade In</button>
  <div class = "target">
    <img src = "/images/jquery.jpg" alt = "jQuery" />
  </div>
  <div class = "log"></div>
</body>
</html>
raja
Kristi Castro
Published on 31-Jul-2018 13:20:14

Previous Page Print Page Next Page  
Advertisements