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/