Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
2
I'm trying to do something as simple as making a text or a colored box opaque on click using javascript. Some thing simple to see how exactly it works to do so. I tried doing it using a loop but had no success.
I was wondering if you guys could show me an example and maybe help me understand how it works exactly?
4 replies to this topic
Back to top|
|
|
#2
Posted 10 March 2011 - 11:41 AM
BlaineSch
-
- Members
-
- 2,448 posts
Writes binary right handed and hex left handed
Most functions you see will edit the elements CSS property. I posted a link to w3's school, this shows the CSS and JS examples of how to edit a property's opacity.
CSS Image Opacity / Transparency
CSS Image Opacity / Transparency
#3
Posted 10 March 2011 - 11:54 AM
Howdy_McGee
-
- Members
-
- 135 posts
Programmer
Oh yeah I've tried that and putting it into a loop. What i'm trying to do it have it "Fade" with opacity. Like the opacity slowly disappears. I'm just not sure how to code that.
#4
Posted 10 March 2011 - 12:36 PM
BlaineSch
-
- Members
-
- 2,448 posts
Writes binary right handed and hex left handed
Works fine for me.
.fadeIn() – jQuery API
.fadeOut() – jQuery API
<!DOCTYPE HTML>
<html>
<head>
<title>Fading JS</title>
</head>
<body>
<div id="fadeMe">
I'm MELTING!!!
</div>
<script type="text/javascript">
function fadeID(id, opacity) {
document.getElementById(id).style.opacity=opacity/10;
document.getElementById(id).filters.alpha.opacity=opacity*10;
}
var a = 10;
for(var i = 0;i<10;i++) {
setTimeout("fadeID('fadeMe', "+i+");", 500*a--); // Fade out
// setTimeout("fadeID('fadeMe', "+i+");", 500*i); // Fade In
}
</script>
</body>
</html>JS Libraries are the norm for websites. You may check out jQuery.fadeIn() – jQuery API
.fadeOut() – jQuery API
#5
Posted 10 March 2011 - 12:38 PM
Alexander
-
- Moderators
-
- 4,118 posts
It's Science!
- Location:Vancouver, Eh! Cleverness: 200
There seems to be a nice writeup here:
Javascript Fade Effects :: I Like Spam
The key codes being
Javascript Fade Effects :: I Like Spam
The key codes being
var element = document.getElementById('somediv');function setOpacity(level) {
element.style.opacity = level;
element.style.MozOpacity = level;
element.style.KhtmlOpacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}And [FONT=Courier New]var duration = 1000; /* 1000 millisecond fade = 1 sec */
var steps = 20; /* number of opacity intervals */[/FONT][FONT=Courier New]
var delay = 5000; /* 5 sec delay before fading out */
function fadeIn(){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setOpacity(" + i + ")", i * duration);
}
setTimeout("fadeOut()", delay);
}
function fadeOut() {
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setOpacity(" + (1 - i) + ")", i * duration);
}
setTimeout("fadeIn()", duration);
}[/FONT]
Edit: beaten to it!
Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
