js图片淡入淡出时图片要跳一下，怎么解决

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: blue;
            opacity: 0.3;
        }
    </style>
    <script>

        window.onload=function(){
            var mydiv=document.getElementById('div1');
            mydiv.onmouseover=function(){
                startmove(0.9);
            }
            mydiv.onmouseout=function(){
                startmove(0.3);
            }
        }
        var timer=null;
        
        function startmove(itarget){
            var speed=0;
            var tmd=0;
            var mydiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function(){
                
                if(tmd<itarget)
                {
                    speed=0.01;
                }
                else
                {
                    speed=-0.01;
                }
                if(tmd==itarget)
                {
                    clearInterval(timer);
                }
                else
                {
                    tmd+=speed;
                    mydiv.style.opacity=tmd;
                }    
            }, 30);
        }
    </script>
</head>
<body>
    <div id="div1">
        
    </div>
</body>
</html>

因为你已经给tmd赋值为0了，每次执行函数，tmd都是从0开始算起的。

var oDiv=document.querySelector('#foo'),
    timer=null;

function startMove(obj,target){
    var timer=null,
        tmd=getComputedStyle(obj,null).opacity,//就是这里
        speed=0;
    tmd=parseFloat(tmd)
    obj.addEventListener('mouseover',function(){
        clearInterval(timer);
        timer=setInterval(function(){
            if(tmd<target){
                speed=0.01;
                tmd+=speed;
                obj.style.opacity=tmd
            }else{
                clearInterval(timer)
            }
        },10)
    },false)
}

startMove(oDiv,1)

试试我这个，只有移入部分，移出同理
链接描述

【热门文章】