Question

如何设置welcome.png设置为opacity 0并点击按钮（id =“c1”）以慢慢淡入不透明度100？

<img id = "welcome" src="img/welcome.png"></img>

<a class="Btn" id= "c1" onclick="javascript:document.getElementById('var').value='a_';mkr(this)">Button1</a>

我尝试添加以下内容。但是没有用。

<a class="Btn" id= "c1" onclick="javascript:document.getElementById('var').value='a_';mkr(this); javascript:document.getElementById('welcome').className = 'opac';">Button1</a1

.opac {
    opacity:1;
    filter:alpha(opacity=100);
}

Answer 1

不需要JQuery（有些人可能会说JQuery不够：D）。这应该足以满足您的需求。

<img id = "welcome" src="img/welcome.png" />

<a class="Btn" id= "c1" onclick="document.getElementById('welcome').className = 'opac';">Button1</a>

CSS：

#welcome { opacity:0; transition: opacity 1s; }
.opac{opacity: 1 !important;}

演示 :(适用于Chrome，未在其他浏览器中测试）
http://jsfiddle.net/zKkun/

Answer 2

        $('#c1').click(function(){
            $("#welcome").animate({
                    opacity:1                   
            },5000);
        });

启动0不透明度和onClick将不透明度设置为100

2 个答案: