Question

我为WordPress开发了一个插件来包含这个jQuery库的功能：http://ricostacruz.com/jquery.transit/#top - 仅用于学习目的。

这是我的页面：http://petoria.de - 如果您将鼠标移到徽标上，它会旋转360°。

问题：它只旋转一次。我想让它每次旋转我将鼠标移到徽标上。就像在第一个提到的网站的例子中一样。

我做旋转的代码是：

jQuery(document).on('mouseenter', '#logo', function() {
  jQuery(this)
      .transition({perspective: '300px', rotateX: '360deg'}, 500, 'ease-out')
});

您也可以在kmt.init.js

中看到它

a）每次将鼠标移到徽标上时如何让它旋转？

b）heck是jquery.transit网站上运行演示的代码？

Answer 1

您必须在转换功能的回调中重置旋转（再次将其设置为0度），或者您可以通过将代码更改为

来实现相同的旋转。

jQuery(this).transition({
    perspective: '+=300px', 
    rotateX: '+=360deg'
}, 500, 'ease-out');

+=增加属性的值

Answer 2

动画结束后重置样式。您可以对重置进行排队，如下所示：

jQuery(document).on('mouseenter', '#logo', function() {
  jQuery(this)
      .transition({perspective: '300px', rotateX: '360deg'}, 500, 'ease-out')
      .transition({rotateX: 0, duration: 0});
});

这样可以避免计时大于必要的rotateX值，并且每次都会增加值。

Answer 3

我认为你需要回到零度才能再次旋转它。

Answer 4

jQuery(document).on('mouseenter', '#logo', function() {
   jQuery(this)
      .transition({
         perspective: '+=300px', 
         rotateX: '+=360deg'
      }, 500, 'ease-out');
});

使用相对值将在此处工作，而不再需要+=增量代码。

jQuery转换只能运行一次

4 个答案: