javascript - jQuery 动画无限不起作用

Question

我有这个代码

var goRight = function() {
  $(this).animate({'left:' '40px'}, 1000, goLeft);
};

var goLeft = function() {
  $(this).animate({'left:' '-40px'}, 1000, goRight);
};

var main = function() {
  $('.square').hover(function() {
    $(this).toggleClass('active');
  });
$('.square').goRight();
};

$(document).ready(main);

它应该将正方形(div)向右移动，然后无限地移回左侧，并在用户将鼠标悬停在其上时将其变为蓝色。但这不起作用。问题可能出在 goRight 和 goLeft 函数中。因为如果我完全删除它们，悬停会很好地改变颜色。当这些功能都没有时，就没有任何作用了。

Answer 1

你需要像这样进行链接

$.fn.goRight = function() {
  this.animate({
    'left': '40px'
  }, 1000, function() {
    $(this).goLeft()
  });
  return this;
};

$.fn.goLeft = function() {
  this.animate({
    'left': '-40px'
  }, 1000, function() {
    $(this).goRight()
  });  
  return this;
};

var main = function() {
  $('.square').hover(function() {
    $(this).toggleClass('active');
  });
  $('.square').goRight();
};

$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div style="width:100px;height:100px;background:black;position:relative;" class="square"></div>

有关 jQuery 插件开发的更多信息:https://learn.jquery.com/plugins/basic-plugin-creation/