如何使用jquery在hover时旋转图像？
我试图在hover时将“回到顶部”按钮旋转360度而不在鼠标上旋转。 我已经尝试过多种jQuery代码，但我仍然无法让它工作。 这是我到目前为止所处的真实例子（CSS也在图像之间hover）。
我已经尝试将jQuery更改为mouseenter ， mouseover ， hover以及包含和省略; rotate数后，无济于事。 这是一个简单的jQuery语法错误，我正在制作？
HTML：
CSS：
.scrollup { width: 45px; height: 45px; display: block; margin-left: auto; position: relative; cursor: pointer; } .scrollup img { position: absolute; } .scrollImg2 { opacity: 0; } .scrollup:hover > .scrollImg1 { opacity: 0; } .scrollup:hover > .scrollImg2 { opacity: 1; }
JQuery的：
$(".scrollup").mouseover(function() { $(".scrollup-circle").rotate(360); });
你可以使用jQuery如下所示
您可以使用css变换和旋转动画
.scrollup { width: 45px; height: 45px; display: block; margin-left: auto; position: relative; cursor: pointer; } .scrollup img { position: absolute; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; } .scrollImg2 { opacity: 0; } .scrollup:hover{ } .scrollup:hover > img { opacity: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); } .scrollup:hover > .scrollImg2 { opacity: 1; }
您可以使用css animation ， .hover() ， animationend事件。 在.hover()事件处理程序@keyframes元素的animation-name设置为@keyframes名称，在.hover()事件中将element的animation-name设置为空字符串
$(".scrollup") .hover(function() { $(this).css({"animationName":"rotate", "mozkitAnimationName":"rotate", "webkitAnimationName":"rotate"}); }) .on("animationend.rotate", function() { $(this).css({"animationName":"", "mozkitAnimationName":"", "webkitAnimationName":""}); });
.scrollup { width: 45px; height: 45px; display: block; margin-left: 50%; position: relative; cursor: pointer; animation-duration: 2s; -moz-animation-duration: 2s; -webkit-animation-duration: 2s; } .scrollup img { position: absolute; } .scrollImg2 { opacity: 0; } .scrollup:hover > .scrollImg1 { opacity: 0; } .scrollup:hover > .scrollImg2 { opacity: 1; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }