Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
144 lines (139 sloc) 4.29 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.css">
<style type="text/css" media="screen">
p, h2 {
margin: 1em;
}
#bd div.demo {
border: 1px solid black;
background-color: #ccc;
height: 100px;
width: 100px;
position: relative;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="doc3" class="yui-t7">
<div id="hd"><h1 id="header">Example</h1></div>
<div id="bd">
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
</div>
<div id="ft">&nbsp;</div>
</div>
<!--script src="http://yui.yahooapis.com/3.0.0b1m2/build/yui/yui-min.js"></script>
<script src="http://yui.yahooapis.com/3.0.0b1m2/build/event/event-min.js"></script-->
<script src="../3.x/build/yui/yui-min.js"></script>
<script src="../3.x/build/anim/anim.js"></script>
<script src="node-effects.js"></script>
<script>
YUI({
base: '../3.x/build/'
}).use('node', 'anim', 'node-effects', function(Y) {
console.log(Y);
Y.get('div.demo').on('click', function(e) {
/*
e.halt();
this.setStyles({
width: '0',
height: '0',
opacity: 0,
});
this.effect('grow', null, {
height: 100,
width: 100
});
/*
this.effect('shrink');
this.effect('shaketb');
this.effect('shakelr');
this.setStyle('width', '0');
this.setStyle('height', '0');
this.effect('unfold', null,
{
to: {
width: 100,
height: 100
}
});
this.setStyle('width', '0');
this.effect('blindRight', function() {
Y.later(700, this, function() {
this.setStyle('width', '100px');
this.effect('appear');
});
}, {
to: {
width: 100
}
});
*/
/*
this.effect('blindLeft', function() {
Y.later(700, this, function() {
this.setStyle('width', '100px');
this.effect('appear');
});
});
this.setStyle('height', '0');
this.effect('blindDown', null, {
to: { height: 100 }
});
this.effect('drop', function() {
Y.later(700, this, function() {
this.setStyle('top', '0');
this.effect('appear');
});
}, {
to: {
width: 5
}
});
*/
//this.effect('pulse');
/*
this.effect('blindUp', function() {
Y.later(700, this, function() {
this.effect('appear', null, {
to: {
height: 100
}
});
});
}, {
duration: 3
});
*/
});
/*
Y.get(document).on('click', function(e) {
Y.all('div.demo').effect('drop', function() {
Y.later(700, this, function() {
this.setStyle('top', '0');
this.effect('appear');
});
});
});
*/
Y.get(document).on('click', function(e) {
Y.all('div.demo').effect('pulse', function() {
Y.all('div.demo').effect('shakelr', function() {
Y.all('div.demo').effect('shaketb');
});
});
});
});
</script>
</body>
</html>
Something went wrong with that request. Please try again.