javascript - start 0 opacity and onClick set opacity to 100 - Stack Overflow

admin管理员组

文章数量:1422077

How do I start wele.png set to opacity 0 and when button (id= "c1") is clicked to slowly fade in to opacity 100?

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

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

I tried adding the below. But did not work.

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

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

How do I start wele.png set to opacity 0 and when button (id= "c1") is clicked to slowly fade in to opacity 100?

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

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

I tried adding the below. But did not work.

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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 31, 2014 at 9:04 JonaNathaliJonaNathali 17744 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

No JQuery needed(some people might say not enough JQuery :D ). This should be enough for whta you need.

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

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

CSS:

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

Demo: (works in chrome, not tested in other browsers)
http://jsfiddle/zKkun/

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

本文标签： javascriptstart 0 opacity and onClick set opacity to 100Stack Overflow