Meddelande

Minska
No announcement yet.

div fade in/fade out

Minska
X
  • Filter
  • Klockan
  • Show
Clear All
new posts

  • div fade in/fade out

    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!

    Kod:
    document.getElementById("mindiv").style.display="inline";
    kan du ändra till:

    Kod:
    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

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

    Kod:
    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)


    Kod:
    <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>
    Sök ALLT! http://sokallt.se

  • #2
    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.

    Kommentera


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




      Kod:
      <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>
      Sök ALLT! http://sokallt.se

      Kommentera


      • #4
        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.

        Kommentera


        • #5
          Ä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.

          Kommentera


          • #6
            Tjena!

            Ingen fråga är dum så:

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

            Mvh Viktor

            Kommentera


            • #7
              Ä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

              Kommentera


              • #8
                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:
                HTML-kod:
                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:
                HTML-kod:
                <a href="javascript:fadeindiv();">Länken</a>
                Nu borde det hela fungera

                /webb

                Kommentera


                • #9
                  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:
                  HTML-kod:
                  <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.

                  Kommentera


                  • #10
                    fakethis99 skrev:
                    Ä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 [citat]
                    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.
                    [/citat] Detta gäller IE7 också
                    Last edited by Fredde Mannen; 2009-05-08, 22:50.
                    För lata svin är marken alltid frusen..

                    Don't try to fix your linux system without knowing where your towel is. It is useful for three things
                    1. Muffling screams of frustration
                    2. Covering evidence of your ineptitude
                    3. Crying into.


                    Ubuntu forums
                    Umbraco é nice.
                    Jag försöker åtminstone..

                    Ironi är intelligenta människors möjlighet att göra en viktig poäng samtidigt som man har lite kul.

                    Kommentera


                    • #11
                      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

                      Kommentera

                      Working...
                      X