MooTools – Fx.Element


MooTools – Fx.Element

”;


Previous

Next

Fx.Element allows you to add the Fx functionality to multiple dom elements on a single page. Actually Fx.Element is an extension of the Fx.Morph plugin. The only difference between Fx.Element and Fx.Morph is the syntax. In this syntax, the start({}) method is used to create an effect and the .set({}) method is used to set some styles.

Take a look at the following syntax for Fx.Element.

Syntax

var fxElementsArray = $$(''.myElementClass'');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
   //Fx Options
   link: ''chain'',
   duration: 1000,
   transition: ''sine:in:out'',
   
   //Fx Events
   onStart: function(){
      startInd.highlight(''#C3E608'');
   }
});

start({}) and set({})

Start and set keyword structures are used to start and set styles. But in this structure, you refer to the element via the index — the first element is 0, the second is 1, and so on. Take a look at the following syntax for the Start and Set structures.

Syntax

//you can set your styles with .set({...})
fxElementsObject .set({
   ''0'': {
      ''height'': 10,
      ''width'': 10,
      ''background-color'': ''#333''
   },
   ''1'': {
      ''width'': 10,
      ''border'': ''1px dashed #333''
   }
});

//or create a transition effect with .start({...})
fxElementsObject .start({
   ''0'': {
      ''height'': [50, 200],
      ''width'': 50,
      ''background-color'': ''#87AEE1''
   },
   ''1'': {
      ''width'': [100, 200],
      ''border'': ''5px dashed #333''
   }
});

Example

Let us take an example that explains the Fx.Element. Take a look at the following code.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .ind {
            width: 200px;
            padding: 10px;
            background-color: #87AEE1;
            font-weight: bold;
            border-bottom: 1px solid white;
         }
         .myElementClass {
            height: 50px;
            width: 100px;
            background-color: #FFFFCC;
            border: 1px solid #FFFFCC;
            padding: 20px;
         }
         #buttons {
            margin: 20px 0;
            display: block;
         }
      </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 startFXElement = function(){
            this.start({
               ''0'': {
                  ''height'': [50, 100],
                  ''width'': 50,
                  ''background-color'': ''#87AEE1''
               },
               
               ''1'': {
                  ''width'': [100, 200],
                  ''border'': ''5px dashed #333''
               }
            });
         }
         
         var startFXElementB = function(){
            this.start({
               ''0'': {
                  ''width'': 300,
                  ''background-color'': ''#333''
               },
               
               ''1'': {
                  ''width'': 300,
                  ''border'': ''10px solid #DC1E6D''
               }
            });
         }
         
         var setFXElement = function(){
            this.set({
               ''0'': {
                  ''height'': 50,
                  ''background-color'': ''#FFFFCC'',
                  ''width'': 100
               },
               
               ''1'': {
                  ''height'': 50,
                  ''width'': 100,
                  ''border'': ''none''
               }
            });
         }
         
         window.addEvent(''domready'', function() {
            var fxElementsArray = $$(''.myElementClass'');
            var startInd = $(''start_ind'');
            var cancelInd = $(''cancel_ind'');
            var completeInd = $(''complete_ind'');
            var chainCompleteInd = $(''chain_complete_ind'');
            
            var fxElementsObject = new Fx.Elements(fxElementsArray, {
               //Fx Options
               link: ''chain'',
               duration: 1000,
               transition: ''sine:in:out'',
               
               //Fx Events
               onStart: function(){
                  startInd.highlight(''#C3E608'');
               },
               
               onCancel: function(){
                  cancelInd.highlight(''#C3E608'');
               },
               
               onComplete: function(){
                  completeInd.highlight(''#C3E608'');
               },
               
               onChainComplete: function(){
                  chainCompleteInd.highlight(''#C3E608'');
               }
            });
            
            $(''fxstart'').addEvent(''click'', startFXElement.bind(fxElementsObject));
            $(''fxstartB'').addEvent(''click'', startFXElementB.bind(fxElementsObject));
            $(''fxset'').addEvent(''click'', setFXElement.bind(fxElementsObject));
            $(''fxpause'').addEvent(''click'', function(){
               fxElementsObject.pause();
            });
            $(''fxresume'').addEvent(''click'', function(){
               fxElementsObject.resume();
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "start_ind" class = "ind">onStart</div>
      <div id = "cancel_ind" class = "ind">onCancel</div>
      <div id = "complete_ind" class = "ind">onComplete</div>
      <div id = "chain_complete_ind" class = "ind">onChainComplete</div>
      
      <span id = ''buttons''>
         <button id = "fxstart">Start A</button>
         <button id = "fxstartB">Start B</button>
         <button id = "fxset">Reset</button>
         <button id = "fxpause">Pause</button>
         <button id = "fxresume">Resume</button>
      </span>
      
      <div class = "myElementClass">Element 0</div>
      <div class = "myElementClass">Element 1</div>
   </body>
   
</html>

You will receive the following output −

Output