Strugglin with jquery rotate animation
Question
I'm strugglin with the jquery animation. i have two li tags the first is just like a divider and the second is the link. if the user hovers the second, the first should be rotate 90 degrees. The html looks like this:
<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.
Here the 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/
Any suggestions? Thanks in advance.
4 answers
solution1
2 ACCPTED 2015-03-29 01:11:32
You could accomplish the same thing using css. It is rotating 360 degrees, because fa-rotate-270 is already rotated 270 degrees. 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>
solution2
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. 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>
solution3
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/
solution4
0 2015-03-29 00:08:08
@Marios Hadjimichael beat me to the answer.
Hover expects 2 function arguments but you're only using 1.
Jquery seems to be using the one function for both enter and exit. mouseenter only happens when the mouse enters the element and only requires 1 function argument. Seems the logical choice.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.