/    Sign up×
Community /Pin to ProfileBookmark

making a div dissapear

i have a div with img and some text
i want to make it like go and fade away
when presing on it
how do i do it?
10X?
peleg

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@GollumAug 26.2003 — If it were just text, it would be easy - just set up a timeout loop to slowly change the text colour to the background colour.

Doing the same to an image complicates things. The partial transparency in PNG files sounds good except it won't work in IE. If the image is not too big, you could create a GIF animation that fades the image to the background colour at the same rate as the text.
Copy linkTweet thisAlerts:
@GollumAug 26.2003 — Ahh, I was confused when you said "fade" which usually means the image grows dimmer and dimmer until you can't see it any more. I think what you are after is called a "sweep"

To do a sweep, you could use 2 divs, one inside the other, the outer one crops the inner one and shrinks while the inner one moves left so that it appears to stay still.

You will probably want to change the <img> bit with your message 'n stuff
<i>
</i>&lt;div id=sweepOuter style="position:absolute; left:100px;top:100px;width:300px;height:200px;overflow:hidden;"&gt;
&lt;div id=sweepInner style="position:relative; left:0px"&gt;
&lt;img galleryimg=no src="myMessage.gif" onclick="sweepT = 0; sweep();"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
var sweepT = 0;
function sweep()
{
var oOuter = document.getElementById('sweepOuter');
var oInner = document.getElementById('sweepInner');
sweepT += 5;
if ( sweepT &lt; 150 )
{
oOuter.style.left = (100 + sweepT).toString() + "px";
oOuter.style.width = (300 - sweepT * 2).toString() + "px";
oInner.style.left = "-" + sweepT.toString() + "px";
window.setTimeout("sweep();",25);
}
else
{
oOuter.style.visibility = "hidden";
}
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@diamondsAug 26.2003 — How does that fade? with the opacity style.

Try looking at the code.
Copy linkTweet thisAlerts:
@pelegk1authorAug 27.2003 — i tried to do that same but i do something wronng i dont know execlly what
×

Success!

Help @pelegk1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...