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/