Velocity.js - 1

Velocity.js jQuery animasyon akışını geliştirmek için yeni özellikler eklenmiş ve belirgin ölçülerde yüksek performans almamızı sağlayan bir animasyon iyileştirici plugindir.

HTML

<script src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script>
<div class="box" id="jQuery"><span>jQuery</span></div>
<div class="box" id="velocity"><span>velocity</span></div>

CSS

html,body{width:100%;height:100%;}
body{overflow:hidden;margin-left:25%;}
.box{position:relative;display:inline-block;width:25%;height:25%;border:1px solid #000;background-color:#f0f0f0;}
.box span{position:relative;display:block;text-align:center;top:50%;margin-top:-10px;line-height:20px;font:16px Verdana;font-weight:bold;}
#jQuery {background:#333;}
#velocity {background:blue;}

JavaScript

$jQuery=$("#jQuery");
$velocity=$("#velocity");

$jQuery
	.animate({top:"75%",opacity:"0.50"},{duration:2000})
    .animate({left:"20%",opacity:"0.50"},{duration:2000})
	.animate({top:"25%",opacity:"1"},{duration:2000})
    .animate({left:"-10%",opacity:"1"},{duration:2000});

$velocity
	.velocity({top:"75%",opacity:"0.50"},{duration:2000})
    .velocity({right:"20%",opacity:"0.50"},{duration:2000})
	.velocity({top:"25%",opacity:"1"},{duration:2000})
    .velocity({right:"-10%",opacity:"0.50"},{duration:2000});