Home>

Detailed JQuery basic animation operations

1.jquery animation effect,Hide and show.

Two methods:hide () "hide" show () "show"

<p>jquery animation effect,Hide and show</p>
<input type="button" value="hidden">
<input type="button" value="display">
 <script>
  $(document) .ready (function () {
   $("#button1"). click (function () {
    $("p"). hide ();
   })
   $("#button2"). click (function () {
    $("p"). hide ();
   })
  })
 </script>

Syntax:$(selector) .hide (speed.callback)

Syntax:$(selector) .show (speed.callback)

callback parameter:is the name of the function to be executed after hiding or showing.

$(document) .ready (function () {
   $("#button1"). click (function () {
    $("p"). hide (500);
    alert ("Congratulations, the display is complete")
   })
   $("#button2"). click (function () {
    $("p"). show (200, function () {
     alert ("Congratulations, the display is complete")
    })
   }

Syntax:$(selector) .toggle (speed.callback)

The speed parameter specifies the speed at which the parameter is hidden and displayed,The value is "show" "fast". Milliseconds (1 second equals 1000 milliseconds)

callback parameter:is the name of the function to be executed after hiding or showing.

$("#button3"). click (function () {
     $("p"). toggle (1000, function () {
     $("p"). css ({color:"yellow"})
     })

2.jquery swipe and animation

Two methods:slidedow () toggledoe ()

<body>
<div>click on me, slide to show or hide the panel</div>
<div>hello jquery</div>
</body>
 <style>
  #slide, #slide {
   padding:5px;
   text-align:center;
   background-color:#4bffe8;
   border:solid 1px #181caa;
  }
  #panel {
   display:none;
   padding:40px;
  }
 </style>
 <script>
  $(document) .ready (function () {
   $("#slide"). click (function () {
    $("#panel"). slidetoggle ()
   })
  })
  </script>

3.jquery animation effect,Animation

The animate () method is used to create custom animations.

grammar:

$(selector), animate ((params), speed, callback)

The required params parameters define the css properties that form the animation

<body>
<button>start animation</button>
<p>All html elements have a static position by default,And it ’s impossible to move,If you need to change,Then the element's position attribute must be set to absolute, relative, fixed</p>
<div></div>
</body>
<script>
  $(document) .ready (function () {
   $("button"). click (function () {
    $("div"). animate ({left:"200px"}, 1000, function () {
    $("div"). css ({background:"yellow"})
   })
   })
  })
 </script>

4. Manipulate multiple attributes:

animate ();use relative values

<body>
<input type="button" value="start animation">
<div></div>
</body>
 <script>
  $(document) .ready (function () {
   $("#slide"). click (function () {
    $("div"). animate ({
     left:"200px", opacity:"0.5", height:"160px", width:"160px"
    })
   })
   })
 </script>
javascript

Related articles

  • Previous Implementation method of interception of uri in nginx location
  • Next Encapsulation and inheritance usage examples of Python object-oriented programming classes
    • Trends