Of Stack

jquery Animation Effects Study Notes (8 effects)

  • 2020-10-23 20:53:02
  • OfStack

1. Display and hide elements

display:none; hidden display:block; According to

Simple show and hide methods

a) show () displays Hidden b) hide () toggle() switch, show to hide, hide to show 

<script type="text/javascript">
  function f1(){
    // hidden 
    $("div").hide();//display:none
    //document.getElementById('id').style.display="none";
  }
  function f2(){
    // According to 
    $("div").show();//display:block
  }
  function f3(){
    $("div").toggle();
  }
</script>
<style type="text/css">
   div {width:300px; height:200px; background-color:blue;}
</style>
 <body>
   <div>duck and dog</div>
   <input type="button" value=" hidden " onclick="f1()" />
   <input type="button" value=" According to " onclick="f2()" />
   <input type="button" value=" Switch the effect " onclick="f3()" />
</body>

CSS supports two methods of displaying and hiding elements, using the visibility or display styles, which control the appearance and hiding of elements with the same effect, but with different results.
The details are as follows:

When hiding an element, the visibility attribute will also save the influence of the element in the document flow, and the unknown of the element will remain unchanged after hiding. This property includes the values visible(default) and hidden. When display is hidden, hidden elements no longer occupy the location of the document.

2. Sliding effect display and hide

slideUp(speed[,callback]) slides elements up and eventually hides slideDown(speed[,callback]) slides down the elements and finally displays them slideToggle(speed[,callback])

speed: Speed to set the effect (slow (600) normal (400) fast (200) time (ms))
callback: Callback function that is automatically called after the effect completes execution 


<script type="text/javascript">
  function f1(){
    // hidden 
    $("div").slideUp(3000,function(){
      alert(' I'm gone. Can you see it ');
    });
  }
  function f2(){
    // According to 
    $("div").slideDown(3000,function(){
      alert(' I'm back again ');
    });//display:block
  }
  function f3(){
    $("div").slideToggle(1000);
  }
  $(function(){
    // Cylinder sliding effect 
    //setInterval("f3()",1000);
  });
</script>

<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>


<body>
   <div>duck and dog</div>
   <input type="button" value=" hidden " onclick="f1()" />
   <input type="button" value=" According to " onclick="f2()" />
   <input type="button" value=" Switch the effect " onclick="f3()" />
 </body>

3. Fade in and fade out

Let the element change through 1 fixed transparency, achieve the effect of showing and hiding

fadeIn(speed, [callback]) fadeOut(speed, [callback]) fadeToggle(speed, [callback]) switching effect fadeTo(speed, opacity, [callback]) set div to 1 set transparency (0-1) 0.3 is 30% transparency 


<script type="text/javascript"> 
  function f1(){
    // hidden 
    $("div").fadeOut(4000);
  }
  function f2(){
    // According to 
    $("div").fadeIn(4000);
    $("#two").fadeTo(2000,0.3);
  }

  function f3(){
    $("div").fadeToggle(2000);
  }

</script>
<style type="text/css">
  div {width:300px; height:200px; background-color:blue;}
</style>
<body>
  <div id = "two">duck and dog</div>

  <input type="button" value=" hidden " onclick="f1()" />
  <input type="button" value=" According to " onclick="f2()" />
  <input type="button" value=" Switch the effect " onclick="f3()" />
</body>

Set the transparency for div to 30% :

4. Bottom method of animation effect animate()

show() hide() and other animation effects internally execute the animate() method 


$().animate(css Effect of parameters [ Time, ][ , the callback function ]);

Common jquery methods such as css() return the current jquery object after execution, so many jquery methods can be called in a chain. 


 <script type="text/javascript">
  function f1(){
    // Text size, text bold, div Its own width and height 
    //font-size background-color color

    console.log($("div"));
    //jquery End of object invocation css The method itself is still 1 a jquery object 
    // instructions css Method has been executed return this The keyword 
    console.log($("div").css('font-weight','bold').css("background-color",'pink')); 

    var jn = {'font-size':'30px',width:'400px',height:'300px'};
    $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);

    //$("div").animate(jn,2000);
  }

</script>

<style type="text/css">
  div {width:300px; height:200px; background-color:blue; }
</style>

<body>
  <div>duck and dog</div>
  <input type="button" value=" Set up the " onclick="f1()" />
</body>

5. Cumulative subtraction animation

If the animation is set to left: 500 once, the first click on div will move 500 pixels to the left, and the second click will not move. The cumulative subtraction is continuous. Just change left: "500px" to left: "+=500px" or left: "-=500px". 


(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "+=500px"}, 3000); 
  }) 
})</span>

6. Multiple animations

1. Execute multiple animations at the same time
The above example only controls the change of the left attribute. This time we control the left attribute and the element height is changed to 200px 


$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px",height:"200px"}, 3000); 
  }) 
})

2. Execute animation in sequence

In the example above, both the element right shift and the zooming height are animated simultaneously. Now we want to do a right shift and then zoom in, which is as simple as breaking the animate() method above into two 


$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px"},3000) 
       .animate({height:"200px"},1000); 
  }) 
})

3. Comprehensive animation

Next, complete the more complex animation. Click on the div element to increase its height as it moves to the right, and change its opacity from 50% to 100%. And then I'm going to move it from top to bottom, and I'm going to make it wider when I'm done here
Some effects are then hidden by fading them out. 


$(function(){ 
  $("#panel").css("opacity",0.5);// Set opacity  
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000) 
       .fadeOut(1000); 
  }) 
})

7, animation callback function

In the above example, if you want to toggle the css style in the last step instead of hiding the element. This allows us to use the third argument callback function of animate 


$(function(){ 
  $("#panel").css("opacity",0.5);// Set opacity  
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")}); 

  }) 
})

This adds the css method to the animation queue.

8. Stop the animation and determine whether the animation is in the state

1. Stop the animation of the element

stop([clearQueue][,gotoEnd]) are both optional arguments, both of type boolean
Parameter description:

clearQueue: represents whether to clear the queue of animations that have not finished executing
gotoEnd: represents whether to jump to the end of the animation being executed
The two parameters of the stop() method can be understood with a composite example: 


<script type="text/javascript">
  function f1(){
    // hidden 
    $("div").slideUp(3000,function(){
      alert(' I'm gone. Can you see it ');
    });
  }
  function f2(){
    // According to 
    $("div").slideDown(3000,function(){
      alert(' I'm back again ');
    });//display:block
  }
  function f3(){
    $("div").slideToggle(1000);
  }
  $(function(){
    // Cylinder sliding effect 
    //setInterval("f3()",1000);
  });
</script>

<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>


<body>
   <div>duck and dog</div>
   <input type="button" value=" hidden " onclick="f1()" />
   <input type="button" value=" According to " onclick="f2()" />
   <input type="button" value=" Switch the effect " onclick="f3()" />
 </body>
0

2. Determine whether the element is in an animated state

When using the animate() method, avoid the accumulation of animations that may cause the animation to be inconsistent with the user's behavior. Animation accumulation occurs when the user quickly animates animate() on an element.

The solution is to determine if the element is animated, and when it is not, add a new animation to the element.
Usage: 


<script type="text/javascript">
  function f1(){
    // hidden 
    $("div").slideUp(3000,function(){
      alert(' I'm gone. Can you see it ');
    });
  }
  function f2(){
    // According to 
    $("div").slideDown(3000,function(){
      alert(' I'm back again ');
    });//display:block
  }
  function f3(){
    $("div").slideToggle(1000);
  }
  $(function(){
    // Cylinder sliding effect 
    //setInterval("f3()",1000);
  });
</script>

<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>


<body>
   <div>duck and dog</div>
   <input type="button" value=" hidden " onclick="f1()" />
   <input type="button" value=" According to " onclick="f2()" />
   <input type="button" value=" Switch the effect " onclick="f3()" />
 </body>
1

Through the detailed analysis of 8 KINDS of jquery animation effects in this paper, play with jquery animation effects, I hope you like this article for a comprehensive introduction of jquery animation effects.

Related articles: