Question

我正在使用纯JavaScript，所以我创建了一个小的淡入/淡出对象，以调整图像不透明度onmouseover和onmouseout。当鼠标悬停和鼠标移动操作精确时，褪色工作正常：

开始从白色背景移动光标
将鼠标悬停在图片上
将鼠标悬停在白色背景上

问题是，一旦我开始将鼠标“自然地”从一个图像移动到另一个图像，褪色（或者说脚本本身）就会冻结。

我不确定这是一个动画速度问题，还是我在实现中缺少的东西。

如果有人有时间看一看，我会很感激同行检查，所以我可以解决问题并学习新东西。

谢谢！

Answer 1

在我看来，你有一个INTERVAL为你FADER，每个IMG你需要一个。 My jsfiddle fixes this。我为每个IMG添加了一个ALT属性＆＃34; dome＆＃34;内容，以规避jsfiddle工作非猫图像..忽略该部分 - 下面评论。设计存在一些基本问题 - 跟踪物体和物体;参考是关键。使用＆＃34;这个＆＃34; ＆安培; ＆＃34;即＆＃34;没有帮助当前的实施（见OP的评论）。此外，另一方面，使用＆＃34; toFixed（2）＆＃34;并不是真的需要恕我直言，你可以缩短＆＃34; o = o + 0.1＆＃34;到＆＃34; o + = 0.1＆＃34;。

JS：

var fader = {

    target: document.getElementsByTagName('img'),
    interval: [],
    speed: 25,
    default_opacity: 1,

    init: function() {
        this.bindEvents();
    },

    // Get element's opacity and increase it up to 1
    fadeIn: function(element) {
        var element_opacity = this.getOpacity(element),
            that = this,
            idx = element.getAttribute('data-idx');
        console.log("fI: "+idx+" "+element_opacity);
        this.default_opacity = element_opacity.toFixed(2);

        this.interval[idx] = setInterval(function() {
            if (element_opacity.toFixed(2) < 1) {
                element_opacity = element_opacity + 0.1;
                element.style.opacity = element_opacity.toFixed(2);
            } else {
                clearInterval(that.interval[idx]);
            }
        }, that.speed);
    },

    // Get current opacity and decrease it back to the default one
    fadeOut: function(element) {
        var element_opacity = this.getOpacity(element),
            that = this,
            idx = element.getAttribute('data-idx');
        console.log("fO: "+idx+" "+element_opacity);
        this.interval[idx] = setInterval(function() {
            if (element_opacity.toFixed(2) > that.default_opacity) {
                element_opacity = element_opacity - 0.1;
                element.style.opacity = element_opacity.toFixed(2);
            } else {
                clearInterval(that.interval[idx]);
                element.removeAttribute('style');
            }
        }, that.speed);
    },

    // Get opacity of an element using computed styles
    getOpacity: function(element) {
        var styles = window.getComputedStyle(element),
            opacity = parseFloat(styles.getPropertyValue('opacity'));
        return opacity;
    },

    bindEvents: function() {
        var that = this, count = 0;
        for (var i in this.target) {   
            // the whole "dome" is just a fsfiddle hack - otherwise it sees 7 images instead of 4!
            //if( this.target[i].alt == "dome" ){
            console.log("COUNT: "+count);
            this.target[i].setAttribute('data-idx',count);
            this.target[i].onmouseover = function() {
                that.fadeIn(this);
            }
            this.target[i].onmouseout = function() {
                that.fadeOut(this);
            }
            count++;
            //}
        }
    }

};

fader.init();

当快速悬停在图像上时，Javascript淡入/淡出效果会冻结

1 个答案: