diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/docs/transition/transition-view.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/transition/transition-view.html Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,255 @@ + + + + + Example: Showing and Hiding with Transitions + + + + + + + + + + +
+
+

+
+ + +

Example: Showing and Hiding with Transitions

+
+
+
+
+
+

This example shows how to show and hide Node instances.

+
+ +
+ + + +

lorem ipsum dolor sit

+ + + +
+ +

Showing a Node

+

The view of a Node instance can be transitioned by passing true to the show and hide methods.

+ +
Y.one('.demo').show(true);
+ + +

Hiding a Node

+

The opposite of show, the hide method sets the node's CSS display property to none.

+ +
Y.one('.demo').hide(true);
+ + +

Complete Example Source

+
<button id="hide" class="yui3-button">hide</button>
+<button id="show" class="yui3-button">show</button>
+
+<div class="demo"><p>lorem ipsum dolor sit</p></div>
+
+<script type="text/javascript">
+YUI().use('transition', 'node-event-delegate', 'cssbutton', function(Y) {
+    Y.delegate('click', function(e) {
+        var buttonID = e.currentTarget.get('id'),
+            node = Y.one('.demo');
+            
+        if (buttonID === 'show') {
+            node.show(true);
+        } else if (buttonID == 'hide') {
+            node.hide(true);
+        }
+
+    }, document, 'button');
+});
+</script>
+ +
+
+
+ +
+
+ + + +
+
+

Examples

+
+ +
+ +
+
+ + + +
+
+

Examples That Use This Component

+
+ +
+ +
+
+ +
+
+
+
+ + + + + + + + + + +