Home > Developer > Web Develop
1 /**2 * "JQ basic animation"3 * Show () display4 * Hide () hidden5 * Toggle () Toggle6 * Default No animation, if you want to produce animation7 * Within parentheses, add the number of milliseconds to animate and control the speed of the animation8 *9 * "Sliding animation"Ten * Slidedown () slide display (bottom) One * slideup () slide hide (top) A * Slidetoggle Slide switch - * Default animation, default is 400 milliseconds - * Fade Animation the * FADEIN () fade-in display - * FadeOut () fade out display - * Fadetoggle () cut light - * FadeTo (time, transparency) set transparency + */I. Basic animations
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6<script src= "Lib/jquery-1.12.2.js" ></script>7<script>8$(function () {9$ (' button:eq (0) '). Click (function () {Ten$ (' img '). Show (1000); One }); A -$ (' Button:eq (1) '). Click (function () { -$ (' img '). Hide (1000); the }); - -$ (' Button:eq (2) '). Click (function () { -$ (' img '). Toggle (1000); + }); - }); +</script> A at<body> -<button> Display </button> -<button> Hide </button> -<button> Toggle </button><br/> - -</body> inTwo. Slide animation<! DOCTYPE html>. box{width:200px; HEIGHT:60RPX; Background-Color:pink; } </style> <script src= "Lib/jquery-1.12.2.js" ></script> <script> $(function () { $(' button '). EQ (0). Click (function () { $('. Box '). Slidedown (); }); $(' button '). EQ (1). Click (function () { $('. Box '). Slideup (); }); $(' button '). EQ (2). Click (function () { $('. Box '). Slidetoggle (); }); }); </script>Three. Fade animation1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6<style>7 . box{8 width:200px;9 height:400px;Tenbackground-Color:pink; One } A</style> -<script src= "Lib/jquery-1.12.2.js" ></script> -<script> the$(function () { -$ (' button '). EQ (0). Click (function () { -$ ('. Box ')). FadeIn (); - }); +$ (' button '). EQ (1). Click (function () { -$ ('. Box ')). FadeOut (); + }); A$ (' button '). EQ (2). Click (function () { at$ ('. Box '). Fadetoggle (1000); - }); -$ (' button '). EQ (3). Click (function () { -$ ('. Box '). FadeTo (400,0.3); - }); - }); in</script> - to<body> +<button> Display </button> -<button> Hide </button> the<button> Toggle </button> *<button> Transparency </button> $<br>Panax Notoginseng<!----> -<div class= "box" ></div> the</body> +Four. Custom animations1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6<style>7 . main{8 width:100px;9 height:100px;Tenbackground-Color:pink; One /*transition:all. 4s;*/ A } -</style> -<script src= "Lib/jquery-1.12.2.js" ></script> the<script> -$(function () { - /** - * Custom animations (compatible with IE678.) + * In fact, the JQ animation can also be achieved through CSS3, but CSS3 will have compatibility issues - * When moving a project, you can use CSS3 directly to achieve the effect. + * PC side to consider the low version browser compatible, can use JQ's animate function A * at * Animated Properties: - * value is the attribute of the number: (color, text centered these will not be implemented) - * Core Function - *. Animate ({Property collection}) - * - * */ in - to + //(color, text centered these will not be animated) -$ (' button '). Click (function () { the$ ('. Main ')). Animate ({ *"width": "300px", $"Height": "300px",Panax Notoginseng"BackgroundColor": "#f90", -"TextAlign": "Center", the"Lineheight": "300px" +},300); A }); the }); +</script> - $<body> $<button> Moving up </button> -<div class= "Main" > - Text line number the</div> -</body>Wuyijquery--basic animations, slide animations, fade animations, custom animations
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
