用jQuery Strugglin旋转动画
[英]Strugglin with jquery rotate animation
问题描述
我为jquery动画而苦恼。 我有两个li标签，第一个就像分隔线，第二个是链接。 如果用户将第二个鼠标悬停，则第一个应该旋转90度。 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>
但是，如果我对其进行测试，则分隔线将旋转90度以快速旋转，然后再次旋转90度，在整个动画播放之后，它总共旋转180度。
这里的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);
});
};
这里的小提琴： http : //jsfiddle.net/r293oLdg/
有什么建议么？ 提前致谢。
4 个解决方案
解决方案1
2 已采纳 2015-03-29 01:11:32
您可以使用CSS完成相同的操作。 它正在旋转360度，因为fa-rotate-270已经旋转了270度。 以下代码段：
$(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
假设每次将鼠标悬停在链接上时只希望发生一次，则可以使用“ mouseenter”而不是“ hover”事件。 如下：
$(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
尝试
$(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/
解决方案4
0 2015-03-29 00:08:08
@Marios Hadjimichael击败了我。
悬停功能需要2个函数参数，但您只使用1个。
jQuery似乎对输入和退出都使用一个功能。 mouseenter仅在鼠标进入元素且仅需要1个函数参数时发生。 似乎是合理的选择。
jquery悬停和线旋转动画
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.