Question

我在使用以下代码时遇到问题：

cmd /c mybatch.bat

}

每个元素的旋转只能工作一次。下一次旋转后应该在大约5秒内完成，但它不是。我在互联网上寻找建议，但没有发现任何有用的东西。

感谢您的帮助。

Answer 1

第二次设置变换时，没有任何变化，因此不会发生任何变化。每次设置变换时，请继续增加角度：

＆＃13;

var permission = true;
var turn = 0;
var angle1 = 0;
var angle2 = 0;

setInterval(function() {size()}, 2000);

function size(){
  if (permission == true){
    if (turn == 0){
      $(document).ready(function(){
        angle1 += 360;
        $('img#me').css('transform', 'rotateX(' + angle1 + 'deg)');
        turn = 1;
      });
    } else {
      $(document).ready(function(){
        angle2 += 360;
        $('img#contact').css('transform', 'rotateY(' + angle2 + 'deg)');
        turn = 0;
      });
    }
  }

}

＆＃13;

img { transition-duration: 1s; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<img src="http://placekitten.com/125/130" id="me">
<img src="http://placekitten.com/125/130" id="contact">

＆＃13;

Answer 2

这里有几个错误：

$.ready()移动它setInterval;
设置css变换后，需要删除第二个元素变换元素。

以下是一个示例：JSnippet Demo

jQuery的：

var permission = true;
var turn = true;
$(function(){
  setInterval(function() {size()}, 2500);
});

function size(){
  if (permission){
    if (turn){
        $('img#me').addClass('animate').css('transform', 'rotateX(360deg)');
        $('img#contact').removeClass('animate').css('transform', '');
        turn = false;
    } else {
        $('img#contact').addClass('animate').css('transform', 'rotateY(360deg)');
        $('img#me').removeClass('animate').css('transform', '');
        turn = true;
    }
  }
}

CSS：

img.animate {
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease;
}

使用Jquery添加了变换选项的区间代码只能运行一次

2 个答案: