Native, jQ, and CSS3 methods of animation effects, special effects jqcss3

Native, jQ, and CSS3 methods of animation effects, special effects jqcss3

Recently, I have been watching the JS Special Effects of motion. I mainly focused on native writing, which is too troublesome. I finally saw a method of motion, which can be directly referenced later, then we found that this method is similar to jQ. The Code is as follows:

Basic HMTL and CSS

　　

<! DOCTYPE html> 
I. Native JS Writing Method
// Native format: window. onload = function () {var div11 = document. getElementById ('div1 '); var div21 = document. getElementById ('div2'); var div31 = document. getElementById ('did3'); div11.onmouseover = function () {startMove (div11, 'height', 200) ;}; div21.onmouseover = function () {startMove (div21, 'width ', 200) ;}; div31.onmouseover = function () {startMove (div31, 'opacity ', 100) ;}; div11.onmouseout = function () {startMove (div11, 'heigh T', 100) ;}; div21.onmouseout = function () {startMove (div21, 'width', 100) ;}; div31.onmouseout = function () {startMove (div31, 'opacity ', 30) ;};}; function getStyle (obj, attr) {if (obj. currentStyle) {return obj. currentStyle [attr];} else {return getComputedStyle (obj, false) [attr] ;}// function getStyle (obj, attr) {// return obj. currentStyle? Obj. currentStyle [attr]: getComputedStyle (obj, false) [attr]; // motion frame function startMove (obj, attr, iTarget) {clearInterval (obj. timer); obj. timer = setInterval (function () {var iCur = 0; if (attr = 'opacity ') {iCur = parseInt (parseFloat (getStyle (obj, attr )) * 100);} else {iCur = parseInt (getStyle (obj, attr);} var iSpeed = (iTarget-iCur)/8; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (iCur = iTarget) {clearInterval (obj. timer);} else {if (attr = 'opacity ') {obj. style. filter = 'Alpha (opacity: '+ (iCur + iSpeed) +') '; obj. style. opacity = (iCur + iSpeed)/100 ;}else {obj. style [attr] = iCur + iSpeed + 'px ';}}, 30 )}View Code
Ii. jQ writing
<Script type = "text/javascript" src = "jquery. js "> </script> <script type =" text/javascript "> $ (). ready (function () {$ ('# div1 '). mouseover (function () {$ (this ). animate ({width: '200px '}, "slow") ;}); $ (' # div2 '). mouseover (function () {$ (this ). animate ({height: '200px '}, "slow") ;}); $ (' # div3 '). mouseover (function () {$ (this ). animate ({opacity: '1'}, "slow") ;}); $ ('# div1 '). mouseout (function () {$ (this ). animate ({width: '100px '}, "slow") ;}); $ (' # div2 '). mouseout (function () {$ (this ). animate ({height: '100px '}, "slow") ;}); $ (' # div3 '). mouseout (function () {$ ('# div3 '). animate ({opacity: '0. 3'}, "slow") ;}}) </script>View Code
Iii. CSS3 writing
# Div2 {transition: height 2 s 2 s;} # div1 {transition: width 2 s;} # div3 {transition: opacity 2 s;-moz-transition: opacity 2 s; -webkit-transition: opacity 2 s;-o-transition: opacity 2 s;} # div1: hover {width: 200px;} # div2: hover {height: 200px ;} # div3: hover {opacity: 0; filter: alpha (opacity = 0 );}View Code
The comparison shows that the CSS3 method is more suitable. Based on the original learning principle, jQ is used for complex motion modes, and CSS3 is the optimal choice (without considering the compatibility of earlier versions of IE ).
CSS3 supports IE10 and later versions.