用jQuery Strugglin旋转动画
[英]Strugglin with jquery rotate animation
问题描述
I'm strugglin with the jquery animation. 
我为jquery动画而苦恼。 i have two li tags the first is just like a divider and the second is the link. 我有两个li标签，第一个就像分隔线，第二个是链接。 if the user hovers the second, the first should be rotate 90 degrees. 如果用户将第二个鼠标悬停，则第一个应该旋转90度。 The html looks like this: html看起来像这样：
<div id="navbar">
<ul class="nav navbar-nav">
<li class="divider"><i id="oneTh" class="fa fa-thumbs-o-up fa-rotate-270"></i><li>
<li class="active"><a id="one" class="th-ho" href="#">Leistungen</a></li>
</ul>
</div>
But if i test it the divider rotate 90 degrees to fast and then it rotates again 90 degrees, that after the whole animation it rotates in sum 180 degrees. 但是，如果我对其进行测试，则分隔线将旋转90度以快速旋转，然后再次旋转90度，在整个动画播放之后，它总共旋转180度。
Here the javascript: 这里的JavaScript：
function rotateThumbIcon() {
$('.th-ho').hover(function() {
var thId = '#' + this.id + 'Th';
$(thId).animateRotate(90, 1000, "linear", function(){
console.log(this); //this is supposed to be the DOM node, but it isn't
});
});
}
$.fn.animateRotate = function(angle, duration, easing, complete) {
var args = $.speed(duration, easing, complete);
var step = args.step;
return this.each(function(i, e) {
args.step = function(now) {
$.style(e, 'transform', 'rotate(' + now + 'deg)');
if (step) return step.apply(this, arguments);
};
$({deg: 0}).animate({deg: angle}, args);
});
};
Here the fiddle: http://jsfiddle.net/r293oLdg/ 这里的小提琴： http : //jsfiddle.net/r293oLdg/
Any suggestions? 有什么建议么？ Thanks in advance. 提前致谢。
4 个解决方案
解决方案1
2 已采纳 2015-03-29 01:11:32
You could accomplish the same thing using css. 您可以使用CSS完成相同的操作。 It is rotating 360 degrees, because fa-rotate-270 is already rotated 270 degrees. 它正在旋转360度，因为fa-rotate-270已经旋转了270度。 Snippet below: 以下代码段：
$(document).ready(function() { $('.th-ho').mouseenter(function() { $('.fa-thumbs-o-up').addClass('onhover'); }); $('.th-ho').mouseleave(function() { $('.fa-thumbs-o-up').removeClass('onhover'); }); });
.fa-thumbs-o-up.onhover { -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ transform: rotate(360deg); } .fa-thumbs-o-up { -moz-transition: all 1s linear; /* Firefox */ -webkit-transition: all 1s linear; /* WebKit */ -o-transition: all 1s linear; /* Opera */ transition: all 1s linear; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> </head> <body> <div id="navbar"> <ul class="nav navbar-nav"> <li class="divider"><i id="oneTh" class="fa fa-thumbs-o-up fa-rotate-270"></i><li> <li class="active"><a id="one" class="th-ho" href="#">Leistungen</a></li> </ul> </div> </body> </html>
解决方案2
1 2015-03-28 23:59:33
Assuming that you only want this to happen once whenever you hover over the link, you could use the "mouseenter" instead of the "hover" event. 假设每次将鼠标悬停在链接上时只希望发生一次，则可以使用“ mouseenter”而不是“ hover”事件。 As follows: 如下：
$(document).ready(function() { rotateThumbIcon(); }); function rotateThumbIcon() { $('.th-ho').mouseenter(function() { var thId = '#' + this.id + 'Th'; $(thId).animateRotate(90, 1000, "linear", function() { console.log(e); //this is supposed to be the DOM node, but it isn't }); }); $('.th-ho').mouseleave(function() { var thId = '#' + this.id + 'Th'; $(thId).animateRotate(0, 1000, "linear", function() { console.log(e); //this is supposed to be the DOM node, but it isn't }); }); } $.fn.animateRotate = function(angle, duration, easing, complete) { var args = $.speed(duration, easing, complete); var step = args.step; return this.each(function(i, e) { args.step = function(now) { $.style(e, 'transform', 'rotate(' + now + 'deg)'); if (step) return step.apply(this, arguments); }; $({ deg: 0 }).animate({ deg: angle }, args); }); };
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div id="navbar"> <ul class="nav navbar-nav"> <li class="divider"><i id="oneTh" class="fa fa-thumbs-o-up fa-rotate-270"></i> </li> <li class="active"><a id="one" class="th-ho" href="#">Leistungen</a> </li> </ul> </div>
解决方案3
1 2015-03-29 00:16:07
Try 尝试
$(document).ready(function() {
rotateThumbIcon();
});
function rotateThumbIcon() {
var elem = $(".th-ho");
var thId = $("#" + elem[0].id + "Th");
elem.hover(function() {
thId.animateRotate(0, 1000, "linear", function(){
console.log(this);
});
}, function() {
thId.animateRotate(-90, 1000, "linear", function() {
console.log("complete");
})
});
}
$.fn.animateRotate = function(angle, duration, easing, complete) {
var args = $.speed(duration, easing, complete);
args.step = function(now) {
$(this).css("transform", "rotate(" + now + "deg)");
};
$(this).animate({deg: angle}, args);
};
jsfiddle http://jsfiddle.net/r293oLdg/6/ jsfiddle http://jsfiddle.net/r293oLdg/6/
解决方案4
0 2015-03-29 00:08:08
@Marios Hadjimichael beat me to the answer. @Marios Hadjimichael击败了我。
Hover expects 2 function arguments but you're only using 1. 悬停功能需要2个函数参数，但您只使用1个。
Jquery seems to be using the one function for both enter and exit. jQuery似乎对输入和退出都使用一个功能。 mouseenter only happens when the mouse enters the element and only requires 1 function argument. mouseenter仅在鼠标进入元素且仅需要1个函数参数时发生。 Seems the logical choice. 似乎是合理的选择。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.