Shulou(Shulou.com)06/03 Report--

Editor to share with you how to achieve the slow animation effect of javascript, I hope you will gain something after reading this article, let's discuss it together!

The details are as follows

Realization idea

1. Mainly use setInterval timing function

2. Add absolute positioning and offset to the element that needs animation, and pay attention to the relative positioning of its parent element.

3. Multiple elements perform animation, and the animation code can be encapsulated into a function.

4. The element calls the timing function, moves at the time, and calculates the distance of each movement in the timing function

Formula: var step = (target-obj.offsetLeft) / 20

Obj animated object, target target left offset, 20 controls the animation speed, the larger the value, the slower, and the smaller the faster.

5. The timing function can also receive the callback function. If so, the callback function will be executed at the end of the animation.

6. Note that the code to clear the animation is written at the front of the timing function---clearInterval (obj.timer); if not, the effect of each triggered element animation will be superimposed; write down the animation influence before clearing.

Code example aninamate animation * {margin: 0; padding: 0;} .content {width: 1000px; margin: 0 auto;} button {padding: 5px; margin: 60px 10px; border: 1px solid # 666 Outline-color: palevioletred;} .both {background-color: pink; color: # fff; background-color: palevioletred;} .box {position: relative; height: 210px; margin: 0px auto; background-color: # 191b28 } .yutu {position: absolute; top: 0; left: 0; width: 180px; height: 210px;} .Qiaojingjing {position: absolute; top: 0; left: 820px; width: 180px; height: 210px } .word1 {display: none; position: absolute; top:-50px; left: 45%;} .word2 {display: none; position: absolute; top:-30px; left: 50% On the way forward, Qiao Jingjing goes forward in both directions, goes back on the way, Qiao Jingjing goes back.

Please give me some advice for the rest of my life! Please give me some advice for the rest of my life! Var btn1 = document.querySelector ('.btn1'); var btn2 = document.querySelector ('.btn2'); var btn3 = document.querySelector ('.btn3'); var btn4 = document.querySelector ('.btn4'); var both = document.querySelector ('.both'); var yutu = document.querySelector ('.yutu'); var qiaojingjing = document.querySelector ('.aoqijingjing'); var word1 = document.querySelector ('.word1') Var word2 = document.querySelector ('.word2'); btn1.addEventListener ('click', function () {animate (yutu, 340, function () {word1.style.display =' block';});}) Btn2.addEventListener ('click', function () {animate (qiaojingjing, 520, function () {word2.style.display =' block';});}); btn3.addEventListener ('click', function () {animate (yutu, 0, function () {word1.style.display =' none';})) ); btn4.addEventListener ('click', function () {animate (qiaojingjing, 820,function () {word2.style.display =' none';});}); both.addEventListener ('click', function () {animate (yutu, 340); animate (qiaojingjing, 520) Word1.style.display = 'block'; word2.style.display =' block';}); / / Animation function obj animation object, target target left offset, callback callback function function animate (obj, target, callback) {/ / clear the previous animation clearInterval (obj.timer) Obj.timer = setInterval (function () {/ / calculate the distance of each movement var step = (target-obj.offsetLeft) / 20; / / the number of steps rounded step = step > 0? Math.ceil (step): Math.floor (step); obj.style.left = obj.offsetLeft + step + 'px'; if (obj.offsetLeft = = target) {/ / stop animation clearInterval (obj.timer) / if there is a callback function, execute the callback function if (callback) {callback ();}, 30);}

Animation effects:

After reading this article, I believe you have a certain understanding of "how to achieve slow animation in javascript". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.