Question

我需要徽标在400度旋转，然后在mouseOver上旋转360度，然后在mouseOut上它应该旋转-400然后再回到40度。这就是我所完成的。

$("#logo").rotate({ 
bind:
 { 
    mouseover : function() { 
        $(this).rotate({animateTo:400})
    },

    mouseout : function() { 
        $(this).rotate({animateTo:-40})
    }
 } 

});

Answer 1

#logo      {margin:30px; transition:1s;}
#logo:hover{transform:rotate(-400deg);}

<img id="logo" src="//placehold.it/100x100/f0f&text=LOGO">

Answer 2

如果你只需要在悬停时采取行动..简单使用css：hover而不是javascript

#logo{
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
    transition-duration: 0.5s;
}
#logo:hover {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
    transition-duration: 0.5s;
}

DEMO

Answer 3

你需要为rotate函数添加2个额外的参数：

回调：这是一个在旋转完成后运行的函数，在这里你将它拉回-40deg。
持续时间：这是以毫秒为单位的旋转持续时间。

你的代码看起来像那样：

＆＃13;

$("#logo").rotate({
    bind: {
        mouseover: function () {
            $(this).rotate({
                animateTo: 400,
                callback: function () {
                    $(this).rotate({
                        animateTo: 360
                    });
                },
                duration: 400
            });

        },

        mouseout: function () {
            $(this).rotate({
                animateTo: -40,
                callback: function () {
                    $(this).rotate({
                        animateTo: 0
                    });
                },
                duration: 400
            });
        }
    }

});

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<img id="logo" src="http://www.keecker.com/img/logo_circle.png">

＆＃13;

<强>更新

为了将来参考，那些喜欢用纯css实现相同目标的人，这是一个可能的解决方案：

＆＃13;

#logo {
    -webkit-animation: rotate_backwards 1s forwards;
    animation: rotate_backwards 1s;
}
#logo:hover {
    -webkit-animation: rotate_forward 1s forwards;
    animation: rotate_forward 1s;
}
@-webkit-keyframes rotate_forward {

    60% {
        -webkit-transform:rotate(400deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
    }
}
@-webkit-keyframes rotate_backwards {

    60% {
        -webkit-transform:rotate(-400deg);
    }
    100%{
        -webkit-transform:rotate(-360deg);
    }
}
@keyframes rotate_forward {

    60% {
        transform:rotate(400deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
@keyframes rotate_backwards {

    60% {
        transform:rotate(-400deg);
    }
    100%{
        transform:rotate(-360deg);
    }
}

＆＃13;

<img id="logo" src="http://www.keecker.com/img/logo_circle.png">

＆＃13;

向后和向前旋转徽标

3 个答案: