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

Javascript fade in/out effect freezes when hovering quickly over images

本文关键字：淡出 Javascript 冻结 悬停 图像      更新时间：2023-09-26

我在玩纯JavaScript，所以我创建了一个小淡出对象，以调整图像的不透明度onmouseover和onmouseout。当鼠标悬停和鼠标移出动作精确时，淡出工作良好:

  1. 从白色背景开始移动光标
  2. 悬停在图片上
  3. 悬停在白色背景上

问题是，只要我开始"自然"地将鼠标从一个图像移动到另一个图像，褪色(或者更确切地说脚本本身)就会冻结。

我不确定这是动画速度的问题，还是我在实现中遗漏了什么。

如果有人有时间看一看，我很感激同行检查，这样我就可以破解问题并学习新的东西。

这里有一个小提琴:http://jsfiddle.net/6bd3xepe/

谢谢!

正如我所看到的，你有一个INTERVAL为你的FADER，你需要一个为每个IMG。我的小提琴解决了这个问题。我为每个带有"dome"内容的IMG添加了一个alt属性，以避免在非cat图像上工作。忽略这部分——下面注释掉了。设计中有一些基本的错误——跟踪对象& &;参考资料是关键。"this"的用法&"那"在当前的实现中没有帮助(见OP的评论)。另外，在另一个注意事项上，使用"toFixed(2)"并不是真正必要的，您可以将"o = o + 0.1"缩短为"o += 0.1"。

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();
相关文章：