个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我正在为 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);
});
};
这里是 fiddle :http://jsfiddle.net/r293oLdg/
有什么建议吗？提前致谢。
最佳答案
您可以使用 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>关于javascript - 与 jquery 旋转动画作斗争，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29323970/
26
4
0
我是一名优秀的程序员,十分优秀！