Question

编辑：我已更新该功能，这取自

http://www.scriptiny.com/2011/01/javascript-fade-in-out/

所以在我的网页上我有一个图像和两个按钮。我想要完成的是当点击第一个按钮然后图像变为另一个（这是有效的），然后我希望该图像淡出。我有一个函数，它接受一个对象并使其消失，但由于某种原因它不起作用。然后我尝试将该功能添加到按钮，但即使单击该按钮，图像（旧图像和新图像）也不会改变。

我首先显示图片，就像这样。

<img id="chestImg" border="0" src="img/chestClosed.png" alt="Chest!">

然后我有按钮来更改图像，如下所示。

<button id="openChest" onclick='changeImage("chestImg","img/chestO.gif");' > Open Chest! </button>

changeImage 功能如下所示

function changeImage(obj,img) {
    document.getElementById(obj).src = img;
}

然后淡入淡出功能看起来像这样。

var fadeEffect=function(){
    return{
        init:function(id, flag, target){
                this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
        },
        tween:function(){
            if(this.alpha == this.target){
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value
            }
        }
    }
}();

解决方案修复尝试一次

我尝试在 changeImage 功能之后添加对淡入淡出功能的调用，因此它看起来像这样。

function changeImage(obj,img) {
    document.getElementById(obj).src = img;
    fadeEffect.init('chestImg', 0)
}

解决方案修复尝试两次

但是这没用，所以我尝试将它添加到按钮中。 注意最后我不喜欢淡入淡出功能的按钮，但是在图像更改后运行。

<button id="openChest" onclick='fadeEffect.init('chestImg', 0)' > Hide </button>

这两张图片如下所示：

第一个是.png文件

enter image description here

第二个是编辑的 .gif文件，这样不会经常循环，而是只循环一次。

enter image description here

解决方案尝试＃1

我尝试制作类似

的方法

function fade(obj) {
    obj.fadeOut(500);
}

然后这样称呼它，

<button id="openChest" onclick="fade('chestImg')" > Hide </button>

但那没用。

Answer 1

我完全不在，或者应该是

var fadeEffect={
    init:function(id, flag, target){
        this.elem = document.getElementById(id);
        clearInterval(this.elem.si);
        this.target = target ? target : flag ? 100 : 0;
        this.flag = flag || -1;
        this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
        this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
    },
    tween:function(){
        if(this.alpha == this.target){
            clearInterval(this.elem.si);
        }else{
            var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
            this.elem.style.opacity = value / 100;
            this.elem.style.filter = 'alpha(opacity=' + value + ')';
            this.alpha = value;
        }
    }
};

Answer 2

至少，其中只有一个可以在浏览器中运行，而另外两个应该抛出错误。

    this.elem.style.opacity = value / 100;
    this.elem.style.filter = 'alpha(opacity=' + value + ')';
    this.alpha = value

最好检查哪个属性有效，然后定义一个调整相应属性的同名函数。但现在。尝试在chrome中使用不透明度。

功能未被执行

2 个答案: