与 jquery 旋转动画作斗争

Question

我正在为 jquery 动画而苦恼。我有两个 li 标签，第一个就像分隔符，第二个是 link。如果用户将鼠标悬停在第二个上，则第一个应该旋转 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/

有什么建议吗？提前致谢。

Answer 1

假设您只希望将鼠标悬停在 link 上时发生一次，您可以使用 "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>

Answer 2

@Marios Hadjimichael 先于我给出了答案。

Hover 需要 2 个函数参数，但您只使用了 1 个。
Jquery 似乎对进入和退出使用同一个函数。 mouseenter 仅在鼠标进入元素时发生，并且只需要 1 个函数参数。似乎是合乎逻辑的选择。

Answer 3

尝试

$(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/

Answer 4

您可以使用 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>

与 jquery 旋转动画作斗争

Strugglin with jquery rotate animation

html

javascript

css

jquery

rotation