Mar 27, 2014

jQuery で Easing を追加する。 以下、JavaScript のみ。

// easing の定義
jQuery.extend(jQuery.easing, {
    newEasing: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) return b;
        if ((t /= d / 2) == 2) return b + c;
        if (!p) p = d * (.3 * 1.5);
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else var s = p / (2 * Math.PI) * Math.asin(c / a);
        if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
    }
});

// 追加した easing をアニメーションで指定
$(document).ready(function () {
    $("#target").click(function () {
        $("#target").animate({
            left: "300px",
            top: "200px"
        }, 1500, "newEasing");
    });
});

Categories: , ,

0 Comments :

Post a Comment