用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.