velocity的應用

執(zhí)行動畫序列

通過設置第二個動畫的延遲時間來控制

$("#el1").velocity({ width: "100" }, { duration: 3000 })
$("#el2").velocity({ width: "100" }, { duration: 3000, delay: 3000 })

將第二個動畫放到第一個動畫的complete中進行回調

$("#el1").velocity({ width: "100" }, {
    duration: 3000,
    complete: function () {
        $("#el2").velocity({ width: "100" }, { duration: 3000 })
    }
})

通過定義動畫序列來實現(xiàn)

var seq = [{
    elements: $("#el1"),
    properties: { width: "100px" },
    options: { duration: 2000 }
}, {
    elements: $("#el2"),
    properties: { width: "100px" },
    options: {
        delay: 1000,
        duration: 1000
    }
}, {
    elements: $("#el3"),
    properties: "callout.shake",//添加"./js/velocity.ui.min.js"
    options: {
        sequenceQueue: false //第一個執(zhí)行完后 與第二個同步執(zhí)行
    }
}];
$.Velocity.RunSequence(seq);

自定義動畫

velocity.ui中預定義的動畫：
    $ele.velocity("callout.shake");

velocity自定義動畫：
    $.Velocity.RegisterEffect("me.pulse", {
        defaultDuration: 300,
        calls: [
            [{ scaleX: 2 }, 0.25],//0.25 時間段
            [{ scaleY: 2 }, 0.25],
            [{ scaleX: 1 }, 0.25],
            [{ scaleY: 1 }, 0.25]
        ]
    });
    $("#el1").on("mouseover", function () {
        $(this).velocity("me.pulse")
    });

    $.Velocity.RegisterUI("me.pulse", {
        defaultDuration: 300,
        calls: [
            [{ scaleX: [0, 1], scaleY: [2, 1] }],//[0,1] 開始，結束
            [{ scaleX: 9 }, 0.25],
        ]
    });
    $("#el1").on("mouseover", function () {
        $(this).velocity("me.pulse")
    });