Solved

Using CSS to fade out things.

Posted on 2001-07-13
3
154 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
  • 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

831 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