MooTools - Fx.Tween

MooTools, hareketli geçişleri pürüzsüz hale getiren gösterişli efektler gibi farklı geçişler için farklı FX.Tween kısayolları sağlar. Ara kısayollarından birkaç yöntemi tartışalım.

ara ()

Bu yöntem, iki stil özellik değeri arasında yumuşak geçişler sağlar. Bir div'in genişliğini 100px'den 300px'e değiştirmek için ara yöntemini kullanan bir örnek alalım. Aşağıdaki koda bir göz atın.

Misal

<!DOCTYPE html>
<html>

   <head>
      <style>
         #body_div {
            width: 100px;
            height: 200px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var tweenFunction = function(){
            $('body_div').tween('width','300px');
         }
         
         window.addEvent('domready', function() {
            $('tween_button').addEvent('click', tweenFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_div"> </div><br/>
      <input type = "button" id = "tween_button" value = "Set Width to 300 px"/>
   </body>
   
</html>

Aşağıdaki çıktıyı alacaksınız -

Çıktı

solmak ()

Bu yöntem, öğe opaklığını veya saydamlığını ayarlar. MooTools kullanarak bir div'in opaklığını ayarlamak için bir düğme sağladığımız bir örnek alalım. Aşağıdaki koda bir göz atın.

Misal

<!DOCTYPE html>
<html>

   <head>
      <style>
         #body_div {
            width: 100px;
            height: 200px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/JavaScript">
         var fadeFunction = function(){
            $('body_div').fade('.5');
         }
         
         window.addEvent('domready', function() {
            $('fade_button').addEvent('click', fadeFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_div"> </div><br/>
      <input type = "button" id = "fade_button" value = "fade to 50%"/>
   </body>
   
</html>

Aşağıdaki çıktıyı alacaksınız -

Çıktı

Tıkla fade to 50% button div opaklığını% 50'ye düşürmek için.

vurgulamak()

Bu yöntem, farklı arka plan renkleri kullanan bir öğeyi vurgular. Tween Flash'ın iki ana işlevini içerir.

İlk işlevde, öğelere farklı arka plan renkleri uygulamak için Tween Flash kullanılır.
Ara Flaş farklı bir arka plan rengi ayarladığında, başka bir arka plan rengine geçer.

Bu yöntem, seçimden sonra bir öğeyi vurgulamak için kullanılır. Bu yöntemi anlamak için bir örnek alalım. Aşağıdaki koda bir göz atın.

Misal

<!DOCTYPE html>
<html>

   <head>
      <style>
         #div1 {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
         #div2 {
            width: 100px;
            height: 100px;
            background-color: #145A32;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var highlightFunction = function(){
            $('div1').highlight('#eaea16');
         }
         
         var highlightChangeFunction = function(){
            $('div2').highlight('#eaea16', '#FBFCFC');
         }
         
         window.addEvent('domready', function() {
            $('div1').addEvent('mouseover', highlightFunction);
            $('div2').addEvent('mouseover', highlightChangeFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "div1"> </div><br/>
      <div id = "div2"> </div>
   </body>
   
</html>

Aşağıdaki çıktıyı alacaksınız -

Çıktı

Fare işaretçisini renkli div'lerin üzerinde tutmaya çalışın ve flaş vurgularındaki değişiklikleri gözlemleyin.