• Címkék:
  • transzformáció
  • animáció
  • mozgás
  • forgat
  • 3-dimenzió

jQuery Transit

Példa 1 - mozgatás

Deklaráció

        $(document).ready(function(){
          $('#pelda-1-1').hover(
            function () { $('#pelda-1-1 > .box').transition({x: '90px'}) },
            function () { $('#pelda-1-1 > .box').transition({x: '0px'}) }
          )

          $('#pelda-1-2').hover(
            function () { $('#pelda-1-2 > .box').transition({y: '40px'}) },
            function () { $('#pelda-1-2 > .box').transition({y: '0px'}) }
          )

          $('#pelda-1-3').hover(
            function () { $('#pelda-1-3 > .box').transition({x: '90px', y: '40px'}) },
            function () { $('#pelda-1-3 > .box').transition({x: '0px', y: '0px'}) }
          )
        });
      

Példa 2 - forgatás

Deklaráció

        $(document).ready(function(){
          $('#pelda-2').hover(
            function () { $('#pelda-2 > .box').transition({rotate: '30deg'}) },
            function () { $('#pelda-2 > .box').transition({rotate: '0deg'}) }
          )
        });
      

Példa 3 - nyújtás

Deklaráció

        $(document).ready(function(){
          $('#pelda-3-1').hover(
            function () { $('#pelda-3-1 > .box').transition({skewX: '30deg'}) },
            function () { $('#pelda-3-1 > .box').transition({skewX: '0deg'}) }
          )

          $('#pelda-3-2').hover(
            function () { $('#pelda-3-2 > .box').transition({skewY: '30deg'}) },
            function () { $('#pelda-3-2 > .box').transition({skewY: '0deg'}) }
          )

          $('#pelda-3-3').hover(
            function () { $('#pelda-3-3 > .box').transition({skewX: '30deg', skewY: '-30deg'}) },
            function () { $('#pelda-3-3 > .box').transition({skewX: '0deg', skewY: '0deg'}) }
          )
        });
      

Példa 4 - méretezés

Deklaráció

        $(document).ready(function(){
          $('#pelda-4-1').hover(
            function () { $('#pelda-4-1 > .box').transition({scale: 1.2}) },
            function () { $('#pelda-4-1 > .box').transition({scale: 1}) }
          )

          $('#pelda-4-2').hover(
            function () { $('#pelda-4-2 > .box').transition({scale: [2, .5]}) },
            function () { $('#pelda-4-2 > .box').transition({scale: [1, 1]}) }
          )
        });
      

Példa 5 - 3D-s transzformáció

Deklaráció

        $(document).ready(function(){
          $('#pelda-5-1').hover(
            function () { $('#pelda-5-1 > .box').transition({perspective: '100px', rotateX: '180deg'}) },
            function () { $('#pelda-5-1 > .box').transition({perspective: '100px', rotateX: '0deg'}) }
          )

          $('#pelda-5-2').hover(
            function () { $('#pelda-5-2 > .box').transition({perspective: '100px', rotateY: '180deg'}) },
            function () { $('#pelda-5-2 > .box').transition({perspective: '100px', rotateY: '0deg'}) }
          )

          $('#pelda-5-3').hover(
            function () { $('#pelda-5-3 > .box').transition({perspective: '100px', rotate3d: '1, 1, 0, 180deg'}) },
            function () { $('#pelda-5-3 > .box').transition({perspective: '100px', rotate3d: '0, 0, 0, 0deg'}) }
          )
        });
      

Példa 6 - egyéb műveletek

Deklaráció

        $(document).ready(function(){
          $('#pelda-6-1').hover(
            function () { $('#pelda-6-1 > .box').transition({opacity: .1, scale: 1.6}) },
            function () { $('#pelda-6-1 > .box').transition({opacity: 1, scale: 1}) }
          )

          $('#pelda-6-2').hover(
            function () { $('#pelda-6-2 > .box').transition({marginLeft: '20px', height: '70px'}) },
            function () { $('#pelda-6-2 > .box').transition({marginLeft: '0', height: '50px'}) }
          )
        });
      

Példa 7 - transzformációk láncolása

Deklaráció

        $(document).ready(function(){
          $('#pelda-7').hover(
            function () { $('#pelda-7 > .box')
              .transition({x: '50px'})
              .transition({y: '20px'})
              .transition({x: '0px'})
              .transition({y: '0px'})
            },
            function () {}
          )
        });
      

« bezár