Question

我正在与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/

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

Answer 1

你可以用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>

Answer 2

假设您只希望在将鼠标悬停在链接上时发生这种情况，您可以使用＆＃34; mouseenter＆＃34;而不是＆＃34;悬停＆＃34;事件。如下：

＆＃13;

$(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);
  });
};

＆＃13;

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

＆＃13;

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

@Marios Hadjimichael打败了我。

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

苦苦挣扎jquery旋转动画

4 个答案: