Velocity UI Pack Demo2

transitions

by shravan

HTML

<script src="http://julian.com/research/velocity/build/velocity.js"></script>
<script src="http://julian.com/research/velocity/build/velocity.ui.js"></script>
<div id='test1' class='testEle'>fadeIn</div>
<div id='test2' class='testEle'>fadeOut</div>
<div id='test3' class='testEle'>flipXIn</div>
<div id='test4' class='testEle'>flipXOut</div>
<div id='test5' class='testEle'>flipYIn</div>
<div id='test6' class='testEle'>flipYOut</div>

CSS

.testEle {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid red;
    float : left;
    margin: 20px;
}

JavaScript

Velocity(document.getElementById('test1'), "transition.fadeIn");

Velocity(document.getElementById('test2'), "transition.fadeOut");

Velocity(document.getElementById('test3'), "transition.flipXIn");

Velocity(document.getElementById('test4'), "transition.flipXOut");

Velocity(document.getElementById('test5'), "transition.flipYIn");

Velocity(document.getElementById('test6'), "transition.flipYOut");