Demo search engine

Popular demos

  • /effects/fade
  • /ajax/synchronous
  • /ajax/asynchronous
  • /js/browser
  • /effects/move
  • /scrolling/autostart
  • /dnd/boundary_box

    • Popular tags

  • fade
  • move
  • ajax
  • position
  • layout
  • shadow

    •  Source window

    <div id="containerbouton" style="margin-left: auto; margin-right: auto; width: 490px; height:80px;">
    <a class="button" href="javascript:demo.dnd.fade(100, 'contentDiv', 2000);"><span><span><span>Fade in</span></span></span></a>
    <a class="button" href="javascript:demo.dnd.fade(0, 'contentDiv', 2000);"><span><span><span>Fade out</span></span></span></a>
    </div>

    <div id="containerDiv" style="">
    <div id="giftDiv">
    <div id="contentDiv">
    Lorem ipsum dolor sit amet, consectetuer adipisci elit.
    Sed voluptatem in inquit, de aut vitae, exercitus possit alias nulla,
    ut adamare maiorum a fieri si dici maestitiam ad dicunt, iam..
    Et inquam sic [[fade]] familias, sequatur animis quae et quae ea esse,
    autem impediri quaeque modo inciderint consecutionem expectata,
    sed severa etiamsi, in egregios temporibus infinito ad artibus,
    voluptatem aristotele, tandem aliquo industriae collegi timiditatem sibi igitur aut,
    se cum tranquillitate loquuntur quod nullo, quam suum illustribus fugiendam illis tam consequatur...
    </div>
    </div>
    </div>

    <script type="text/javascript">
    if(typeof(demo) == "undefined") {
    demo = {};
    }

    demo.dnd = new function() {
    toutou.require("toutou.effect.fade");
    toutou.require("toutou.html.dom");
    }

    demo.dnd.fade = function(/*Integer*/ endOpacity, fadediv, temps) {
    var div1 = tt$(fadediv);
    toutou.effect.fade.extend(div1);
    div1.tt_effect.fade.fade(endOpacity, temps);
    }
    </script>

    Fade in/out

    This a demonstration about a fade in/out effect created with ToutouJS.
    The fade effect is assigned to a DIV with a duration of 2000 millisecond.

    Lorem ipsum dolor sit amet, consectetuer adipisci elit. Sed voluptatem in inquit, de aut vitae, exercitus possit alias nulla, ut adamare maiorum a fieri si dici maestitiam ad dicunt, iam.. Et inquam sic [[fade]] familias, sequatur animis quae et quae ea esse, autem impediri quaeque modo inciderint consecutionem expectata, sed severa etiamsi, in egregios temporibus infinito ad artibus, voluptatem aristotele, tandem aliquo industriae collegi timiditatem sibi igitur aut, se cum tranquillitate loquuntur quod nullo, quam suum illustribus fugiendam illis tam consequatur...

    Description

    • The ToutouJS function used for the fade effect is: tt_effect.fade.fade(endOpacity, temps);
    • To use it, you must first include the fade library with this code:
      toutou.require("toutou.effect.fade");
    • Then, you have to assign on wich DIV you want to apply the fade effect with this command:
      var div1 = tt$(fadediv);
      toutou.effect.fade.extend(div1);
    • To finally execute the fade effect like that:
      div1.tt_effect.fade.fade(endOpacity, time);