Effect.BlindUp

Combination Effects > Effect.BlindUp

This effect simulates a window blind, where the contents of the affected elements stay in place.

Examples


Effect.BlindUp('id_of_element');
Effect.BlindUp('id_of_element', { duration: 3.0 });

Options

Option Description
scaleX boolean, defaults to false
scaleY boolean, defaults to true
scaleContent boolean, defaults to true
scaleFromCenter boolean, defaults to false
scaleMode string, defaults to ‘box', can also be ‘contents‘
scaleFrom integer value, percentage (0%–100%), defaults to 100
scaleTo integer value, percentage (0%–100%), defaults to 0
duration float value, in seconds, defaults to 1.0

Notes

Works safely with most Block Elements, except table rows, table bodies and table heads.

The opposite of Effect.BlindUp is Effect.BlindDown.

Demo

This is some test content. This is some test content.

Source code of this demo


<div id="blindup_demo" style="width:80px; height:80px; background:#ccc;">
  This is some test content. This is some test content.
</div>
<ul>
  <li><a href="#" onclick="Effect.BlindUp('blindup_demo'); return false;">Click here for a demo!</a></li>
  <li><a href="#" onclick="$('blindup_demo').show(); return false;">Reset</a></li>
</ul>

Effect.BlindLeft

For horizontal scrolling action try this snippet:


Effect.BlindLeft = function(element) {
  element = $(element);
  element.makeClipping();
  return new Effect.Scale(element, 0,
    Object.extend({ scaleContent: false,
      scaleY: false,
      scaleMode: 'box',
      scaleContent: false,
      restoreAfterFinish: true,
      afterSetup: function(effect) {
        effect.element.makeClipping().setStyle({
          height: effect.dims[0] + 'px'
        }).show();
      },
      afterFinishInternal: function(effect) {
        effect.element.hide().undoClipping();
      }
    }, arguments[1] || { })
  );
};