jQuery: how do I animate a div rotation?

后端 未结 8 976
梦毁少年i
梦毁少年i 2020-11-29 05:47

I can rotate a div with css, and jquery .rotate, but i don\'t know how to animate it.

8条回答
  •  挽巷
    挽巷 (楼主)
    2020-11-29 06:20

    I needed to rotate an object but have a call back function. Inspired by John Kern's answer I created this.

    function animateRotate (object,fromDeg,toDeg,duration,callback){
            var dummy = $('')
            $(dummy).animate({
                "margin-left":toDeg+"px"
            },
            {
                duration:duration,
                step: function(now,fx){
                    $(object).css('transform','rotate(' + now + 'deg)');
                    if(now == toDeg){
                        if(typeof callback == "function"){
                            callback();
                        }
                    }
                }
            }
        )};
    

    Doing this you can simply call the rotate on the object like so... (in my case I'm doing it on a disclosure triangle icon that has already been rotated by default to 270 degress and I'm rotating it another 90 degrees to 360 degrees at 1000 milliseconds. The final argument is the callback after the animation has finished.

    animateRotate($(".disclosure_icon"),270,360,1000,function(){
                    alert('finished rotate');
                });
    

提交回复
热议问题