bachir
/
jeunes-et-engages-d7


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>jQuery Transit tests</title>
  <script>
    /*
     * Dynamic script loading
     */

    (function() {
      var m = location.search.match(/jquery=([^&$]*)/);
      var jQueryVersion = m ? m[1] : "1.8.1";

      function addScript(src) {
        document.write("<scr"+"ipt src='"+src+"'></scr"+"ipt>");
      }

      // Dynamically load jQuery depending on what's passed on get params.
      if (jQueryVersion === "1.9.0b1") {
        addScript("http://code.jquery.com/jquery-1.9.0b1.js");
        addScript("http://code.jquery.com/jquery-migrate-1.0.0b1.js");
      } else {
        addScript("http://ajax.googleapis.com/ajax/libs/jquery/"+jQueryVersion+"/jquery.min.js");
      }
      addScript("../jquery.transit.js");
    })();
  </script>
  
  <script src="test.js"></script>
  <link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class='use'>
    Use:
    <a href='index.html?jquery=2.0.3'>jQ 2.0.3</a>
    <a href='index.html?jquery=1.9.0b1'>jQ 1.9.0b1</a>
    <a href='index.html?jquery=1.8.1'>jQ 1.8</a>
    <a href='index.html?jquery=1.7.0'>jQ 1.7</a>
    <a href='index.html?jquery=1.6.0'>jQ 1.6</a>
    <a href='index.html?jquery=1.5.0'>jQ 1.5</a>
    <button class='play-all'>Play all</button>
  </div>

  <div class='description'>
    <h1>jQuery transit tests</h1>
    <p class='version' id='jquery-version'></p>
    <p>Since there's no reliable programmatic way to test for transitions, this
    is a simple page set up so you can visually inspect effects
    conveniently.</p>
  </div>

  <div class='tests'></div>
  <script>
    group('Transformations');

    test('Translation', function($box) { $box.transition({ x: 20, y: 20 }); });
    test('Rotate', function($box) { $box.transition({ rotate: 45 }); });
    test('Rotate via string', function($box) { $box.transition({ rotate: '45deg' }); });
    test('Skew X', function($box) { $box.transition({ skewX: 30 }); });
    test('Skew Y', function($box) { $box.transition({ skewY: 30 }); });
    test('Skew XY', function($box) { $box.transition({ skewY: 30, skewX: 30 }); });
    test('Scale up', function($box) { $box.transition({ scale: 2 }); });
    test('Scale down', function($box) { $box.transition({ scale: 0.5 }); });

    group('3D transformations');

    test('Rotate X', function($box) {
      $box.transition({
        perspective: '500px',
        rotateX: 180
      });
    });

    test('Rotate Y', function($box) {
      $box.transition({
        perspective: '500px',
        rotateY: 180
      });
    });

    test('Rotate X/Y', function($box) {
      $box.transition({
        perspective: '500px',
        rotateX: 180,
        rotateY: 180
      });
    });


    group('Params');

    test('Delay', function($box) {
      $box.transition({ rotate: 45, delay: 150 });
    });

    test('Delay zero', function($box) {
      $box
        .transition({ x: 50, delay: 0 })
        .transition({ x: 0 });
    });

    test('Ease (should be snappy)', function($box) {
      $box.transition(
        { x: 100 }, 500,
        'cubic-bezier(0,0.9,0.3,1)');
    });

    group('Chaining');

    test('Queueing', function($box) {
      $box
      .transition({ x: 50 })
      .transition({ x: 0 })
      .transition({ y: 50 })
      .transition({ y: 0 });
    });

    test('Duration 0 (should not flicker)', function($box) {
      $box
      .transition({ x: 50 }, 0)
      .transition({ x: 0 }, 0)
      .transition({ y: 50 }, 0);
    });

    group('Callbacks');

    test('2nd param', function($box) {
      $box.transition(
        { rotate: 45 },
        function() { $box.html('OK'); });
    });

    test('3rd param', function($box) {
      $box.transition(
        { rotate: 45 },
        500,
        function() { $box.html('OK'); });
    });

    test('as "complete"', function($box) {
      $box.transition({
        rotate: 45,
        complete: function() { $box.html('OK'); }
      });
    });

    group('Misc');

    test('CSS with Transition', function($box) {
      $box
        .css({ x: -50 })
        .transition({ x: 50 });
    });

    test('Opacity', function($box) {
      $box
        .transition({ opacity: 0 });
    });

    test('Transition of transform (no jump first time)', function($box) {
      $box
        .transition({ transform: "translateX(80px)" });
    });


  </script>
</body>
</html>