Søg
Avatar billede morten-vadskaer Praktikant
27. juli 2007 - 16:24 Der er 6 kommentarer

Crossfade af DIV (skal virke i Safari)

Har ledt og ledt herinde, men forgæves. Jeg skal ha' et billede og lidt tekst til at fade ud, skifte og fade ind igen. Derfor antager jeg, at det skal placeres i et DIV-tag. Jeg har indtil videre følgende:
Avatar billede morten-vadskaer Praktikant
27. juli 2007 - 16:32 #1
Nå - det blev sendt, inden jeg fik skrevet spørgsmålet færdigt.
Når jeg i onBlur-handleren skifter billede, så skifter dét, inden den er færdig med at fade ud. Jeg vil først ha' det skiftet, når den har fadet ud, for så at fade ind igen. Jeg har prøvet med setTimeout, men det virker ikke. Fjerner jeg document.images['emailpng'].src='godkendt.png', så fader den fint ud.

Nogen forslag?

(Andet felt i formularen er bare så jeg kan lave "onBlur" på det første felt)

Det jeg har er følgende:
<html>

<head>
<title>
    Fading-test
</title>
       
<script type="text/javascript">

function fadefunktion(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }       
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}



</script>
</head>

<body>

<form action="fadingtest.php" method="post" name="formular">
<table border="1">
    <tr>
        <td>Skriv noget</td>
        <td><input type="text" size="15" name="felt" onBlur="fadefunktion('tekst',100,0,500);document.images['emailpng'].src='godkendt.png';"></td>
        <td><div id="tekst"><img src="stjerne.png" name="emailpng">Her er noget tekst</div></td>
    </tr>
        <td>Flyt her til</td>
        <td><input type="text" size="15" name="nytfelt"></td>
        <td>Blah blah</td>
    </tr>
</table>
</form>


</body>
</html>
Avatar billede roenving Novice
27. juli 2007 - 17:42 #2
Hav to oven på hinanden, hvor den ene fader ud og den anden fader ind, se f.eks. http://www.eksperten.dk/spm/481785 !-)
Avatar billede morten-vadskaer Praktikant
27. juli 2007 - 17:51 #3
roenving tænkte nok, at du ville melde dig på banen. Tak for det hurtige svar. Det fungerer lækkert i alle andre browsere end Safari :o(

Tror måske jeg kan tweake det lidt til at virke i Safari. Får jeg det til at virke poster jeg lige resultatet her.
Avatar billede roenving Novice
27. juli 2007 - 18:00 #4
Rigtig god idé !-)
Avatar billede madeindk Nybegynder
27. juli 2007 - 20:59 #5
Tag evt. et kig på www.jquery.com og find så deres funktion fadeTo()-funktion under: http://docs.jquery.com/Effects - de skriver selv på deres forside at deres funktion virker i: IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
Avatar billede morten-vadskaer Praktikant
30. juli 2007 - 20:01 #6
En dygtig klassekammerat (tak til Christoffer - www.hoel.dk) har ændret lidt på min oprindelige kode og lavet noget, der virker i hvert fald virker i FF og Safari (har ikke testet i IE endnu). Til de interesserede ser det nu således ud:

<html>

<head>
<script type="text/javascript">

function fadefunktion(id, opacStart, opacEnd, millisec, id2, opacStart2, opacEnd2, millisec2) {
      //Det her er neat. Det er hentet fra denne her side
      // http://brainerror.net/scripts_js_blendtrans.php
  //speed for each frame
  var speed = Math.round(millisec / 100);
  var timer = 0;

  //determine the direction for the blending, if start and end are the same nothing happens
  if(opacStart > opacEnd) {
      for(i = opacStart; i >= opacEnd; i--) {
          setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
          timer++;
          if (i == opacEnd && id2 != null){
              setTimeout("document.getElementById('" + id + "').style.display='none';document.getElementById('" + id2 + "').style.display='block';fadefunktion('" + id2 + "', " + opacStart2 + ", " + opacEnd2 + ", " + millisec2 + ")", (timer * speed));
          }
      }
  } else if(opacStart < opacEnd) {
      for(i = opacStart; i <= opacEnd; i++)
          {
          setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
          timer++;
         
      }
  }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
  var object = document.getElementById(id).style;
  object.opacity = (opacity / 100);
  object.MozOpacity = (opacity / 100);
  object.KhtmlOpacity = (opacity / 100);
  object.filter = "alpha(opacity=" + opacity + ")";
}

</script>


</head>

<body>

<form action="fadingtest.php" method="post" name="formular">
<table border="0">
      <tr>
              <td>Skriv noget</td>
              <td><input type="text" size="15" name="felt" onBlur="fadefunktion('tekst',100,0,1000,'tekst2',0,100,1000);"></td>
              <td>
                  <div id="tekst"><img src="stjerne.png">Her er noget tekst</div>
                        <div id="tekst2" style="display:none;"><img src="godkendt.png"> Her er noget andet tekst</div>
                    </td>
      </tr>
              <td>Flyt her til</td>
              <td><input type="text" size="15" name="nytfelt"></td>
              <td>Blah blah</td>
      </tr>
</table>
<input type="submit" value="Tryk her">
</form>

</body>

</html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
06/0516:53 HTML Af Asky i Programmeringsværktøjer
06/0510:01 Mister internettet efter slumre, Af valby i Windows
05/0513:02 Lille smart tingest Af nu_igen i Fitness & Smartwatches
White papers
Flere white papers »