Solved

Using CSS to fade out things.

Posted on 2001-07-13
3
155 Views
Last Modified: 2012-08-13
Ok, I am trying to use CSS's alpha property to make a button fade out when I click another.  I need to use timeout, but don't understand it enough to make it work.  My code is:

<HEAD>
<SCRIPT>
blah=100
function fadeout() {
dimbutton.filters.item(0).enabled = 1
dimbutton.filters.item(0).opacity = blah
while (blah>1)
 {blah --
setTimeout("StepItDown()", (100-blah)*100)
 }
}
function StepItDown()
{
dimbutton.filters.item(0).opacity = blah
}

</SCRIPT>
</HEAD>



<INPUT type="button" value="Click me" id=dimbutton style="filter:Alpha(enabled=0)">


<INPUT type="button" style="position:absolute; top:40; left:220" value="Fade it out" onclick = "fadeout()" >


Now, it works, but it doesn't fade, it just executes the script and counts down 100 to 1, and THEN updates the screen... I know there's an easy was to fix this...
0
Comment
Question by:Radioman2024
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
3 Comments
 
LVL 2

Accepted Solution

by:
tewald earned 50 total points
ID: 6281802
Give this a try Radioman:

<html>
<head>
<script>
<!--
blah=5000
function fadeout() {
     dimbutton.filters.item(0).enabled = 1
     dimbutton.filters.item(0).opacity = blah
     for(blah = 5000; blah > 0; blah--) {
          dimbutton.filters.item(0).opacity = blah
     }
}
//->
</script>
</head>
<body>
<input type="button" value="Click Me" id=dimbutton style="filter:Alpha(enabled=0)"><br>
<input type="button" style="position:absolute; top:40; left:220" value="Fade It Out" onclick = "fadeout();">
</body>
</html>
0
 
LVL 2

Expert Comment

by:tewald
ID: 6281816
Radioman, I think I missed your point with my last comment...  skip it.  However, I'm pretty sure you can't fade-out a button.
0
 
LVL 2

Expert Comment

by:tewald
ID: 6300531
Thanks for the "A" Radioman.
0

Featured Post

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question