自制js动画，互相反的js动画抖动

拼搏现实的明天。 2022-02-23 05:06 214阅读 0赞

本文章与我的博客同步更新：[自制js动画，互相反的js动画抖动][js_js]

抖动处理之前的代码：

imgShowBoxDom.onmouseover=function (ev) {
        var changeImgBtnOpacity=0;
        var changeImgBtnAnimateTimer=setInterval(function () {
            changeImgBtnOpacity+=0.01;
            changeLastImgBtn.style.opacity=changeImgBtnOpacity+'';
            if(changeImgBtnOpacity>=1){
                clearInterval(changeImgBtnAnimateTimer);
            }
        },10);
    
    }
    imgShowBoxDom.onmouseout=function (ev) {
        var changeImgBtnOpacity=1;
        var changeImgBtnAnimateTimer=setInterval(function () {
            changeImgBtnOpacity+=0.01;
            changeLastImgBtn.style.opacity=changeImgBtnOpacity+'';
            if(changeImgBtnOpacity>=1){
                clearInterval(changeImgBtnAnimateTimer);
            }
        },10);
    }

处理之后的代码：

var changeImgBtnOpacity=0;
    var changeImgBtnAnimateShowTimer;
    var changeImgBtnAnimateHideTimer;
    imgShowBoxDom.onmouseover=function (ev) {
        clearInterval(changeImgBtnAnimateHideTimer);
        changeImgBtnAnimateShowTimer=setInterval(function () {
            changeImgBtnOpacity+=0.01;
            changeLastImgBtn.style.opacity=changeImgBtnOpacity+'';
            changeNextImgBtn.style.opacity=changeImgBtnOpacity+'';
            if(changeImgBtnOpacity>=1){
                clearInterval(changeImgBtnAnimateShowTimer);
            }
        },10);
    
    }
    imgShowBoxDom.onmouseout=function (ev) {
        clearInterval(changeImgBtnAnimateShowTimer);
        changeImgBtnAnimateHideTimer=setInterval(function () {
            changeImgBtnOpacity-=0.01;
            changeLastImgBtn.style.opacity=changeImgBtnOpacity+'';
            changeNextImgBtn.style.opacity=changeImgBtnOpacity+'';
            if(changeImgBtnOpacity<=0){
                clearInterval(changeImgBtnAnimateHideTimer);
            }
        },10);
    }

造成原因，请查看原文链接：[http://www.jufanshare.com/content/68.html][js_js]

[js_js]: http://www.jufanshare.com/content/68.html

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS-动画

动画动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤： 1. 获得盒子当前位置 2. 让盒子在当前位置加上1个

喜欢ヅ旅行/ 2024年03月17日 23:51/ 0 赞/ 82 阅读

相关 js动画封装

js动画封装凡是可以看到过渡效果的基本都可以用到js动画，都能引用 <!-- ani() 作用：动画给某个元素查看某个css 属性值

超、凢脫俗/ 2023年06月25日 10:08/ 0 赞/ 23 阅读

相关 HarmonyOS动画,js开发13 animation动画组件&鸿蒙的定时函数和js的动画

今天给大家介绍的是animation动画组件在鸿蒙中的应用.要实现一个 animation 动画，需要使用两个属性@keyframes 和 animation. 一.关键帧(

蔚落/ 2022年10月16日 07:47/ 0 赞/ 186 阅读

相关 css3 动画 vs js 动画

> 之前被问到过，css3 动画与 js 动画孰优孰劣，脑袋的第一反应就是性能上肯定 css3 动画会好很多，但别人说不对，我就在想，不对？难道还有别的原因吗？答案是肯定的。先

矫情吗；*/ 2022年10月01日 07:43/ 0 赞/ 279 阅读

相关 JS动画封装

简单的运动函数 var demo1=document.getElementById("demo1"); demo1.onmouseover=funct

叁歲伎倆/ 2022年08月04日 05:22/ 0 赞/ 194 阅读

相关 JS动画效果

运动框架实现思路： 1.速度（改变值Left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链

青旅半醒/ 2022年06月09日 23:45/ 0 赞/ 236 阅读

相关 js匀速动画及动画库

<table> <tbody> <tr> <td><b>准备知识</b></td> </tr> </tbody> </table> <table

今天药忘吃喽~/ 2022年06月07日 00:53/ 0 赞/ 286 阅读

相关 Vue_JS动画与Velocity.js动画

一.JS动画前面我们用css实现动画效果，那可不可以用JS来实现动画效果么？可以的在transition标签里定义触发事件 @before-enter：在进入动画

一时失言乱红尘/ 2022年05月20日 22:14/ 0 赞/ 257 阅读

相关 vue中动画函数钩子js动画

1. 动画开始：@before-enter @before-leave 动画过程： @enter @leave 在这个

系统管理员/ 2022年04月15日 03:45/ 0 赞/ 293 阅读

相关自制js动画，互相反的js动画抖动

本文章与我的博客同步更新：[自制js动画，互相反的js动画抖动][js_js] 抖动处理之前的代码： imgShowBoxDom.onmouseover=funct

拼搏现实的明天。/ 2022年02月23日 05:06/ 0 赞/ 215 阅读