前后旋转徽标

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

如果您只需要在悬停..simple上执行操作即可使用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个额外的参数：

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

您的代码如下所示：

 $("#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 }); } } }); 

 <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"> 

更新：

供以后参考，喜欢用纯CSS实现相同功能的人，这是一个可行的解决方案：

 #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); } } 

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