Question

点击这是一个div动画。但是当命令结束时，该功能不会重新启动。我尝试了一个回调，但也许错误的搭配。

$(function() {
  //set animation
  $('.fa-arrow-left').on('click', function set_animation() {
    $('.container .set').css({
      'transform': 'translate(27px)'
    });
    $('.fa-arrow-left').css({
      'transform': 'rotate(180deg)'
    });

    $('.fa-arrow-left').on('click', function() {
      $('.container .set').css({
        'transform': 'translate(220px)'
      });
      $('.fa-arrow-left').css({
        'transform': 'rotate(0deg)'
      });
    })
  });
})

Answer 1

如果你不在乎定时器中的代码是否需要比你的间隔更长的时间，请使用setInterval（）：

setInterval（函数，延迟）

一次又一次地激活作为第一个参数传入的函数。

window.setInterval(function() {
// method to be executed;
}, 5000);  //Run the function every 5 seconds

更好的方法是使用setTimeout和自执行匿名函数：

(function(){
// do some stuff
setTimeout(arguments.callee, 60000);
})();

保证在执行代码之前不会进行下一次调用。我在这个例子中使用arguments.callee作为函数引用。这是给函数命名并在setTimeout中调用它的更好方法，因为在ecmascript 5中不推荐使用arguments.callee。

Answer 2

你可以尝试延迟：

$(document).ready(function() 
{ 
    $('.fa-arrow-left').on('click', set_animation());
});
function set_animation()
{
      $('.container .set').css({
          'transform': 'translate(27px)'
      });
      $('.fa-arrow-left').css({
          'transform': 'rotate(180deg)'
      });
      $('.fa-arrow-left').on('click', function() {
          $('.container .set').css({
              'transform': 'translate(220px)'
          });
          $('.fa-arrow-left').css({
              'transform': 'rotate(0deg)'
          });
      });
      this.delay(800, setanimation);
}

这称为＆＃34;回调函数＆＃34;。这个想法是在函数完成时调用它。

我怎样才能循环我的功能？

2 个答案: