TRICK:CSS 3+checkbox 6 Basic animation effects for jquery

In jquery, there are six basic animation functions: Show ()/hide (), FadeIn ()/fadeout (), Slideup ()/slidedown (). In this article, we use Css3+checkbox to achieve these six basic animations.

Implementation of Show ()/hide ()

Show ()/hide () implements the main control element's display property.
Html:

<divid="box">    <input type="checkbox"id="sh"/>    for="sh">show/hide</label>    <divid="shbox">        点击上面的show/hide实现show()/hide()    </div></div>

Css:

#box{  position:relative;} #box*: Not (#shbox){  display:inline-block;} input{  position:absolute; Left  :-10000000px; }: Checked~#shbox{  display:none;} label{ width:px ; height:px ; line-height:px ; text-align:Center ; Border:1px solid green ; position:Absolute ;Left  :0px ; cursor:pointer ; Border-radius:5px ;}#shbox{ background:#ccc ; color:Red ; width:px ; height:px ; Border:1px solid blue ; box-sizing:border-box ; padding:px ; position:Absolute ; top:px ;}

Running Result: https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/

Implementation of FadeIn ()/fadeout ()

The implementation of FadeIn ()/fadeout () is primarily the opcity attribute of the control element. HTML still uses the above, modify the CSS as follows:

:checked~#shbox{    opacity:0;}

FadeIn ()/fadeout () can control the speed of the fade/fade, and also add transition properties to the #shbox to simulate this effect:

#shbox{    transition:opacity 2s;}

Operating effect: https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/

Implementation of Slideup ()/slidedown ()

Slideup ()/slidedown () enables roll-up and drop-down by changing the height of the element. HTML still uses the above, CSS modified as follows:

: Checked~#shbox{  height:0px;} #shbox{ background:#ccc ; overflow-y:hidden ; color:Red ; width:px ; height:px ; box-sizing:border-box ; transition:all 2s ; position:Absolute ; top:px ;}

#shbox添加了 Overflow-y:hidden is to hide the text, otherwise, #shbox里面的文本仍然会显示; transition implements a transition and removes the border attribute.
Running Result: https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/

Summarize

• The main trick is to take advantage of the checked properties of the checkbox (or radio)
• There are five ways to common hidden elements:
  
  1. Display:none; does not occupy space
  2. height:0px;
  3. opacity:0;
  4. position:absolute;left:-11111111px;
  5. Visibility:hidden; Occupy space
     Zhangda a more detailed explanation for this: some ways to hide elements of CSS

Original link: http://www.ido321.com/1560.html

TRICK:CSS 3+checkbox 6 Basic animation effects for jquery