Query What is that?
jQuery is a fast and concise JavaScript framework, which encapsulates the JavaScript code for commonly used functions, provide a simple JavaScript design patterns to optimize HTML document manipulation, event handling, animating and Ajax interactions design.
It encapsulates the JavaScript code for commonly used functions, provide a simple JavaScript design patterns to optimize HTML document manipulation, event handling, animating and Ajax interactions design.
JQuery effects - Hide and Show
.show () so that the hidden element is displayed. Effect: also modify the height, width, Opacity attribute of element
.hide () so that the display elements hidden, and show the opposite
.toggle () method is used to switch the hide () and show () method. Show the hidden elements, and hide displayed elements
A simple and powerful front-end framework JQUery, animation and Rock Paper Scissors game
font-family: Consolas, Menlo, Courier, monospace; font-size: 16px;
white-space: normal; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal;
font-variant-caps: normal; font-weight: normal; letter-spacing: normal;
orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2;
word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">1<!DOCTYPE html>2345678$(document).ready(function(){9$("#hide").click(function(){10$("p").hide();11});12$("#show").click(function(){13$("p").show();14});15});16171819
If you click on the "Hide" button, I will disappear.
Hidden display 20 21 2223JQuery effects - fade
.fadeIn () let fade display hidden element
.fadeOut () so that the display elements fade hide, modify transparency
. FadeToggle () method can be switched between fadeIn (). FadeOut and () method. If the element has left, then fadeToggle () will add a fade effect to the elements. If the element is fade, then fadeToggle () will add fades to the elements.
.fadeTo (time, the final transparency function) with fadeToggle, receiving a second parameter indicating transparency to a final
1<!DOCTYPE html>2345678$(document).ready(function(){9$("button").click(function(){10$("#div1").fadeToggle();11$("#div2").fadeToggle("slow");12$("#div3").fadeToggle(3000);13});14});15161718
The examples show fadeToggle () uses a different speed (speed) parameters.
19 Click Fade In / Out 202122
2324
252627
JQuery effects - slide
.slideDown () so that the hidden element is displayed, the effect is from the top down, increasing the height;
.slideUp () so that the display elements hidden, the effect is from the bottom up, to reduce the height;
. SlideToggle () method can be switched between slideDown () and slideUp () method. If the element slides downward, the slideToggle () thereof slidably upward. If the element is slid upward, the slideToggle () slidably downwardly thereof.
1<!DOCTYPE html>2345678 #panel,#flip
9 {
10 padding:5px;
11 text-align:center;
12 background-color:#e5eecc;
13 border:solid 1px #c3c3c3;
14 }
15 #panel
16 {
17 padding:50px;
18 display:none;
19 }
20 2122 $ (document) .ready (function () {23 $ ( "# flip") click (function () {24 $ ( "# panel") slideToggle ( "slow");.. 25}); 26} ); 2728293031 my point, show or hide the panel. 32Hello world! 3334
JQuery effect -animate () method
.animate ({final style attributes, object keys},
Animation events,
Animation ( "linear", "swing"),
After the implementation of the animation callback function)
Custom Animation Note:
Parameters of a subject, the key must be used hump rule
Only the attribute value type of animation can be used, the type of non-numerical attributes can not be animated
1<!DOCTYPE html>2345678$(document).ready(function(){9$("button").click(function(){10vardiv=$("div");11div.animate({left:'100px'},"slow");12div.animate({fontSize:'3em'},"slow");13});14});1516 171819开始动画20
By default, all HTML elements have a static position, and is immovable. 21 If you need to change, we need to position attribute of the element is relative, fixed, or absolute!
22HELLO232425
Reproduced in: https: //www.jianshu.com/p/9deccb31fd19