<JavaScript> Custom Animations

Tag: Har object default option ASC base hidden Order Input

The animate () method executes a custom animation of the CSS property set.

This method changes the element from one state to another through CSS styles. CSS property values are changed gradually so that you can create animation effects.

Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "background-color:red").

Example code:

<! DOCTYPE html>p {color:red;            } div{width:200px;            height:100px; Background-Color:yellow;        color:red; }    </style> <script src= ". /jquery/jquery-3.3.1.js "></script>Click to observe the animation effect:<select id= "Animation" > <option value= "1" > Animation 1</option> <option value= "2" > Animation 2</option> <option value= "3" > Animation 3</option> <option value= "4" > Animation 4</option></select><input id= " Exec "type=" button "value=" execution animation "><script type=" Text/javascript ">/*The animate () method allows us to create animations on the CSS properties of any numeric value.     * 2 syntax used, almost almost, the only necessary property is a set of CSS property key-value pairs.     * Note that there is a comma behind each CSS Property!!!! * * * * One or more of the CSS properties of the key-value pairs are composed of object objects.     It is important to note that all properties used for animation must be numeric!!!!! */    $("#exec"). Click (function() {        varv = $ ("#animation"). Val (); var$aaron = $ ("#aaron"); if(v = = "1") {            //the units of the values are PX by default$aaron. Animate ({//CSS properties are a set of braces that need to be expanded.width:300, Height:300            },3000,function() {alert (Finished)            }); } Else if(v = = "2") {            //100px on the basis of existing heights$aaron. Animate ({width:"+=100px", Height:"+=100px"            }); } Else if(v = = "3"{$aaron. Animate ({fontSize:"5em"            }, 2000,function() {alert ("Animation FontSize executed!");        }); } Else if(v = = "4") {            //switching heights with the toggle parameter$aaron. Animate ({//width: "Toggle",//Use this width to hide elementsBorderWidth: "6px"//Add Border            }); }    });</script></body>
<JavaScript> Custom Animations