Velocity.js - 3

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="velocity">
    <span>Click me</span>
</div>

CSS

html,body{width:100%;height:100%;}
body{overflow:hidden;margin-left:25%;}
.box{position:relative;display:block;width:50%;height:20%;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{top:25%;}
#velocity{top:35%; cursor: pointer;}

JavaScript

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

$velocity.data("animating", false);
$velocity.data("direction", "left");

$velocity.on("click", function () {

    if ($velocity.data("animating")) {
        return;
    }

    $velocity.data("animating", true);

    if ($velocity.data("direction") === "left") {
        var ml = -30;
        $velocity.data("direction", "right");
    } else {
        var ml = 30;
        $velocity.data("direction", "left");
    }

    $velocity.velocity({marginLeft:ml},{
        duration:500,
        complete: function () {
            $velocity.data("animating", false);       
        }
    });
});