div fade in/fade out

[gjohansson]

Hej.

Eftersom jag är ny på detta forumet så kan jag försöka bidra lite med ett användbart script:

Skriptet tonar in/tonar ut en div, så istället för att sätta din div till synlig direkt, kan du snyggt tona in den! :)

document.getElementById("mindiv").style.display="inline";

kan du ändra till:

fadeindiv("mindiv");

givetvis får du ändra "mindiv" till namnet på din div.
Om ni vill ändra hastigheten på hur fort det ska tona in/tona ut byter du ut värdet 10 till nåt annat.

För att tona ut diven kan du ändra din kod som gömmer diven

document.getElementById("mindiv").style.display="none";

till:

fadeoutdiv("mindiv");


PS. På IE6 finns en bugg med transparencyvärdet som gör att du MÅSTE ha höjd och bredd satta på diven du vill tona.

Jag använder detta några av mina egna sajter och det funkar klockrent för IE6&7, Firefox och Opera.

Mycket nöje! (Kod kommer nedan)



<script language="javascript">

function fadeindiv(id)
{
document.getElementById(id).style.display="none"
fadeinto=setTimeout("divIn(" + 0 + ",'" + id + "')",10);
}

function fadeoutdiv(id)
{
fadeoutto=setTimeout("divOut(" + 100 + ",'" + id + "')",10);
}

function divIn(opacity, id) {
opacity+=20;

var os = document.getElementById(id).style;

os.opacity = (opacity / 101);
os.MozOpacity = (opacity / 101);
os.KhtmlOpacity = (opacity / 101);
os.filter = "alpha(opacity=" + opacity + ")";
os.display="inline";

clearTimeout(fadeinto);
if(opacity<100)
{
fadeinto=setTimeout("divIn(" + opacity + ",'" + id + "')",10);
}
}

function divOut(opacity, id) {
opacity-=20;

var os = document.getElementById(id).style;
os.opacity = (opacity / 101);
os.MozOpacity = (opacity / 101);
os.KhtmlOpacity = (opacity / 101);
os.filter = "alpha(opacity=" + opacity + ")";

clearTimeout(fadeoutto);
if(opacity>0)
{
fadeoutto=setTimeout("divOut(" + opacity + ",'" + id + "')",10);
}
else
{
os.display="none";
}
}
</script>

[The_Hulk]

testade det lite i FF 2 och det verkade funka bra. dock var fade-tiden väldigt snabb så jag fick söla ner det lite så man verkligen såg att det blev en fade.

Jag hade gärna velat ha timeout-värden som en variabel, antingen en för både fadein och fadeout eller en för vardera av dem. blir lite smidigare att ha det som variabel i och med att värdena finns på mer än ett ställe. kanske även förändringen av opacity skulle ligga som en variabel i början av skriptet.

[gjohansson]

Enkelt, bara att lägga till några globala variabler, så ere kirrat.

:)


<script language="javascript">

var fadeintime=10; // higher is slower
var fadeouttime=10; // higher is slower
var opacchange=20; // higher is faster (between 2-30 will probably work best)

function fadeindiv(id)
{
document.getElementById(id).style.display="none"
fadeinto=setTimeout("divIn(" + 0 + ",'" + id + "')",fadeintime);
}

function fadeoutdiv(id)
{
fadeoutto=setTimeout("divOut(" + 100 + ",'" + id + "')",fadeouttime);
}

function divIn(opacity, id) {
opacity+=opacchange;

var os = document.getElementById(id).style;

os.opacity = (opacity / 101);
os.MozOpacity = (opacity / 101);
os.KhtmlOpacity = (opacity / 101);
os.filter = "alpha(opacity=" + opacity + ")";
os.display="inline";

clearTimeout(fadeinto);
if(opacity<100)
{
fadeinto=setTimeout("divIn(" + opacity + ",'" + id + "')",fadeintime);
}
}

function divOut(opacity, id) {
opacity-=opacchange;

var os = document.getElementById(id).style;
os.opacity = (opacity / 101);
os.MozOpacity = (opacity / 101);
os.KhtmlOpacity = (opacity / 101);
os.filter = "alpha(opacity=" + opacity + ")";

clearTimeout(fadeoutto);
if(opacity>0)
{
fadeoutto=setTimeout("divOut(" + opacity + ",'" + id + "')",fadeouttime);
}
else
{
os.display="none";
}
}
</script>

[The_Hulk]

det ser mycket bättre ut tycker jag. Ville inte posta förändring av din kod så därför föreslog jag bara vad jag tyckte kunde ändras för att göra skriptet smidigare.

[fakethis99]

Är nybörjare när det gäller javascript och får tyvärr inte det här scriptet att fungera.

Hur ser tex själva anropet ut?

Är det någon som kan länka till en sida som har den här funktionen, så vore det jättesnällt.

[Xeonz]

Tjena!

Ingen fråga är dum så:

Hur lägger man in detta script på en sida? :)

Mvh Viktor

[webbmannen]

Även jag skulle gärna vilja ha en förklaring på hur man lägger in och använder detta skript.

Det var iaf inte så lätt som att byta ud "id" mot namnet på den "div" man ville få effekt på.

Tacksam för lite hjälp här.
/webb

[webbmannen]

Tänkte bara komma tillbaka och fylla i lösningen så inte fler behöver lägga så mycket tid på trial-and-error som jag själv gjort.

Leta upp följande tre kodsnuttar i det nedersta exemplet:
document.getElementById(id).style.display="none"
var os = document.getElementById(id).style;
var os = document.getElementById(id).style;
Byt ut (id) mot ("namnet_på_din_div") på alla tre ställen (glöm inte fnuttarna).

Du ropar sedan på funktionen så här:
<a href="javascript:fadeindiv();">Länken</a>
Nu borde det hela fungera :h

/webb

[The_Hulk]

Det var väl ett dåligt förslag, varför förstöra en funktion på det sättet?
Det är väl bättre att de använder:

<a href="javascript:fadeindiv('namnet_på_din_div');">Länken</a>

Så slipper de att duplicera funktionerna för varje div de vill använda funktionen för.

[Fredde Mannen]

Är nybörjare när det gäller javascript och får tyvärr inte det här scriptet att fungera.

Hur ser tex själva anropet ut?

Är det någon som kan länka till en sida som har den här funktionen, så vore det jättesnällt.


Tog och kastade upp ett exempel: (Sidan finns inte längre)

//red
PS. På IE6 finns en bugg med transparencyvärdet som gör att du MÅSTE ha höjd och bredd satta på diven du vill tona.
Detta gäller IE7 också

[webbmannen]

Det var väl ett dåligt förslag,...

Själv tycker jag det var ett utmärkt förslag då det lockade fram någon att skriva det som troligen är det mest rätta ;)

/webb