前后旋轉徽標

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