Show and hide image the smooth way ?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jesper_lofgren@yahoo.se
    #1

    Show and hide image the smooth way ?

    Hi,

    I wonder if its possible to show and hide a image with javascipt.

    I want the image to disapear from bottom and up very smooth, maybe
    under 3-4sec.

    Is it possible ? any tips ?

    Thanks
    Jes

    Tags: None
    • marss
      #2
      Re: Show and hide image the smooth way ?


      jesper_lofgren@ yahoo.se wrote:
      Hi,
      >
      I wonder if its possible to show and hide a image with javascipt.
      >
      I want the image to disapear from bottom and up very smooth, maybe
      under 3-4sec.
      >
      Is it possible ? any tips ?
      >
      Thanks
      Jes
      Solution for IE.

      <html>
      <head>
      <script type="text/javascript">
      function hideImage()
      {
      document.getEle mentById("conta iner").filters[0].Apply();
      document.getEle mentById("im1") .style.visibili ty="hidden";
      document.getEle mentById("conta iner").filters[0].Play();
      }
      </script>
      </head>
      <body>
      <DIV ID="container"
      STYLE="height:2 00px;width:200p x;filter:progid :DXImageTransfo rm.Microsoft.Ba rn(orientation= horizontal,
      motion=in)">
      <img id='im1' src="1.jpg" STYLE="height:2 00px;width:200p x">
      </DIV>
      <BUTTON onclick="hideIm age()">Hide image</BUTTON>
      </body>
      </html>

      More information about visual filters:
      http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/reference.asp


        Comment

        • ASM
          #3
          Re: Show and hide image the smooth way ?

          jesper_lofgren@ yahoo.se a écrit :
          I want the image to disapear from bottom and up very smooth, maybe
          under 3-4sec.
          >
          Is it possible ? any tips ?

          Example :

          <html>
          <script type="text/javascript">
          function $(id) { return (typeof(id)=='s tring')?
          document.getEle mentById(id) : id; }
          function fadder(what, opacity, sens, duration)
          {
          what = $(what);
          opacity = (opacity == 100)? 99.999 : opacity;
          // IE/Win
          what.style.filt er = "alpha(opacity: "+opacity+" )";
          // Safari<1.2, Konqueror
          what.style.KHTM LOpacity = opacity/100;
          // Older Mozilla and Firefox
          what.style.MozO pacity = opacity/100;
          // Safari 1.2, newer Firefox and Mozilla, CSS3
          what.style.opac ity = opacity/100
          if(sens>0 && opacity<99 || sens<0 && opacity>0)
          {
          opacity += 1*sens;
          setTimeout(
          function(){fadd er(what, opacity, sens, duration);}
          ,duration);
          }
          else
          {
          $('show').style .display=$('sho w').style.displ ay==''?'none':' ';
          $('hid').style. display=$('hid' ).style.display ==''?'none':'';
          }
          }
          </script>
          In onclick of button play with duration : here = 150<br>

          <img src="asm1.gif" alt="" id="pict" />
          <button id="show"
          onclick="fadder ('pict', 1, 1, 150);"
          style="display: none">show</button>
          <button id="hid"
          onclick="fadder ('pict', 98, -1, 150);">hide</button>
          </html>

          --
          Stephane Moriaux et son moins vieux Mac déjà dépassé
          Stephane Moriaux and his less old Mac already out of date

            Comment

            • TheBagbournes
              #4
              Re: Show and hide image the smooth way ?

              jesper_lofgren@ yahoo.se wrote:
              Hi,
              >
              I wonder if its possible to show and hide a image with javascipt.
              >
              I want the image to disapear from bottom and up very smooth, maybe
              under 3-4sec.
              >
              Is it possible ? any tips ?
              >
              Thanks
              Jes
              >
              Check the tools at http://www.jackslocum.com/blog/index.php

              And the toolkit these are based on: http://developer.yahoo.com/yui/

              These provide means of doing things like that.

                Comment

                • Peter Michaux
                  #5
                  Re: Show and hide image the smooth way ?

                  ASM wrote:
                  >
                  // Safari<1.2, Konqueror
                  what.style.KHTM LOpacity = opacity/100;
                  I talked with some guys on irc #kde and apparently Konq has never
                  supported opacity yet. The development version of Konq for KDE4
                  supports just plain "opacity". So the fact that it is "KHTMLOpaci ty" is
                  just confusing since I think only Safari (khtml based) has used this
                  property.

                  Peter

                    Comment

                    • ASM
                      #6
                      Re: Show and hide image the smooth way ?

                      Peter Michaux a écrit :
                      ASM wrote:
                      > // Safari<1.2, Konqueror
                      > what.style.KHTM LOpacity = opacity/100;
                      >
                      I talked with some guys on irc #kde and apparently Konq has never
                      supported opacity yet. The development version of Konq for KDE4
                      supports just plain "opacity". So the fact that it is "KHTMLOpaci ty" is
                      just confusing since I think only Safari (khtml based) has used this
                      property.
                      I'm not really sure Safari uses it ... (in all cases Safari 1.3 doesn't)


                      --
                      Stephane Moriaux et son (moins) vieux Mac déjà dépassé
                      Stephane Moriaux and his (less) old Mac already out of date

                        Comment

                        • Peter Michaux
                          #7
                          Re: Show and hide image the smooth way ?


                          ASM wrote:
                          Peter Michaux a écrit :
                          ASM wrote:
                          // Safari<1.2, Konqueror
                          what.style.KHTM LOpacity = opacity/100;
                          I talked with some guys on irc #kde and apparently Konq has never
                          supported opacity yet. The development version of Konq for KDE4
                          supports just plain "opacity". So the fact that it is "KHTMLOpaci ty" is
                          just confusing since I think only Safari (khtml based) has used this
                          property.
                          >
                          I'm not really sure Safari uses it ... (in all cases Safari 1.3 doesn't)
                          A little googling makes it look like early Safari does.

                          Also I think it is "KhtmlOpaci ty" but I don't know because different
                          people list it different ways. I would really like to know and test it
                          on Safari 1.1.

                          Peter

                            Comment

                            Previous template Next
                            Working...