简体   繁体   中英

Controlling Jquery Path Bezier Speed

I have an animation, which fades in <div id="robert">stuff</div> , and then has it follow the path specified below. I want to know if there is some way I can slow down the bezier curve animation part? I have it set to "swing" for the easing, but is there a work around to slow it down?

var pathRobert = {
    start: {
        x: 408,
        y: 303,
        angle: 72.594,
        length: 1.390
    },
    end: {
        x: 510,
        y:375,
        angle: 233.366,
        length: 1.138
    }
};

$(window).scroll(function(){
    //first animation for ipad with hands

    if ((withinViewport((testimonials)) == true) && (peopleBlock !=0)){
        peopleBlock = 0;

        $("#robert").fadeTo('fast',1).animate({
            path : new $.path.bezier(pathRobert)
        },"swing");  
    }
});

Thanks,

Alex

You should be able to specify a duration as well as easing.

.animate( properties [, duration ] [, easing ] [, complete ] )

Something like:

$("#robert").fadeTo('fast',1).animate({
    path : new $.path.bezier(pathRobert)
},5000,"swing");

http://jsfiddle.net/kLRN2/

fairly simple fix:

  $("#rita").fadeTo('fast',1).animate({
            path : new $.path.bezier(pathRita)
        },800);

simply replace "swing" with the time you want it to take...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM