前后旋转徽标

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

您需要为旋转函数添加 2 个额外参数：

回调：这是一个在旋转完成时运行的函数，在这里你将它拉回-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">

前后旋转徽标

Rotating logo back and forward

javascript

jquery