jquery animation effect study notes (8 effects)

1. Showing and hiding elements

display:none; hide
display:block; display

Easy to show and hide methods

a) show() show
b) hide() hide
c) toggle() switch, show to hide, hide to show

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").hide();//display:none
    //document.getElementById('id').style.display="none";
  }
  function f2(){
    //显示
    $("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="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
</body>

Copy after login

CSS supports two methods of displaying and hiding elements, namely using visibility or display styles. They have the same effect when controlling the display and hiding of elements, but the results are different.
The specific instructions 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 attribute includes two values: visible (default) and hidden.
After display is hidden, the hidden elements no longer occupy the position of the document.

2. Show and hide sliding effect

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

Speed: Set the speed of the effect (slow (600) normal (400) fast (200) time (milliseconds))
Callback: Callback function automatically called after the effect is executed

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").slideUp(3000,function(){
      alert('我消失了，你能看到么');
    });
  }
  function f2(){
    //显示
    $("div").slideDown(3000,function(){
      alert('我又回来了');
    });//display:block
  }
  function f3(){
    $("div").slideToggle(1000);
  }
  $(function(){
    //气缸滑动效果
    //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="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
 </body>

Copy after login

3. Fade effect

Allow elements to display and hide through certain transparency changes

fadeIn(speed, [callback])
fadeOut(speed, [callback])
fadeToggle(speed, [callback]) switch effect
fadeTo(speed, opacity, [callback]) sets the div to a certain transparency (0-1) 0.3 is 30% transparency

<script type="text/javascript"> 
  function f1(){
    //隐藏
    $("div").fadeOut(4000);
  }
  function f2(){
    //显示
    $("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="隐藏" onclick="f1()" />
  <input type="button" value="显示" onclick="f2()" />
  <input type="button" value="开关效果" onclick="f3()" />
</body>

Copy after login

Set transparency, the transparency of div is 30%:

4. The underlying method of animation effect animate()

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

$().animate(css效果参数[，时间][，回调函数]);

Copy after login

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

 <script type="text/javascript">
  function f1(){
    //文字大小、文字粗体、div本身宽度和高度
    //font-size background-color color

    console.log($("div"));
    //jquery对象调用完毕css方法本身还是一个jquery对象
    //说明css方法执行完毕有return this关键字
    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="设置" onclick="f1()" />
</body>

Copy after login

5. Accumulation and subtraction animation

If the animation is set to left: 500 at a time, the first click on the div will move 500 pixels to the left, and the second click will not move. Accumulation, accumulation and subtraction are continuous movements. Just change left: "500px" to left: " =500px" or left: "-=500px".

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

Copy after login

6. Multiple animations

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

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

Copy after login

2. Execute animations sequentially

In the above example, the two animations of moving the element to the right and enlarging the height are performed simultaneously. Now we need to move right first and then enlarge the height. It is very simple. We only need to split the animate() method above and write it into two

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

Copy after login

3. Comprehensive animation

More complex animations are done next. Click on the div element to move it to the right while increasing its height and switching its opacity from 50% to 100%. Then let it move from top to bottom while its width becomes larger. When this is completed
After some effects, it will be hidden by fading out.

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

Copy after login

7. Animation callback function

In the above example, if you want to switch the css style instead of hiding the element in the last step. Now we can use the third parameter callback function of animate

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#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")}); 

  }) 
})

Copy after login

This adds the css method to the animation queue.

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

1. Stop the animation of the element

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

clearQueue: represents whether to clear the unfinished animation queue
gotoEnd: represents whether to jump to the end state of the animation being executed
You can understand these two parameters of the stop() method through a comprehensive example:

<style type="text/css"> 
  *{margin:0;padding:0;}  
  body { font-size: 13px; line-height: 130%; padding: 60px } 
  #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} 
  .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;} 
  .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;} 
</style> 
<script src="../../../scripts/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
  $(function(){ 
     $("button:eq(0)").click(function () { 
       $("#panel") 
        .animate({height : "150" } , 2000 ) 
        .animate({width : "300" } , 2000 ) 
        .hide(3000) 
        .animate({height : "show" , width : "show" , opacity : "show" } , 2000 ) 
        .animate({height : "500"} , 2000 ); 
     }); 
     $("button:eq(1)").click(function () { 
       $("#panel").stop();//停止当前动画，继续下一个动画 
     }); 
     $("button:eq(2)").click(function () { 
       $("#panel").stop(true);//清除元素的所有动画 
     }); 
     $("button:eq(3)").click(function () { 
       $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画 
     }); 
     $("button:eq(4)").click(function () { 
       $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态  
     }); 

  }) 
</script> 

<body> 
  <button>开始一连串动画</button> 
  <button>stop()</button> 
  <button>stop(true)</button> 
  <button>stop(false,true)</button> 
  <button>stop(true,true)</button> 
  <div id="panel"> 
    <h5 class="head">三国杀杀天下</h5> 
    <div class="content"> 
      夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情 
    </div> 
  </div> 
</body> 
</html>

Copy after login

2. Determine whether the element is in animated state

When using the animate() method, avoid inconsistency between animation and user behavior caused by the accumulation of animations. Animation accumulation occurs when the user quickly performs an animate() animation on an element.

The solution is to determine whether the element is in the animation state, and only add new animation to the element when it is not in the animation state.
Usage:

if(!$(element).is(":animated")){ 
  //添加新的动画 
}

Copy after login

Through this article’s detailed analysis of 8 jquery animation effects, you can play with jquery animation effects. I hope you will like this article that provides a comprehensive introduction to jquery animation effects.

jquery animation effect study notes (8 effects)_jquery