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

你需要像这样进行链接

＆＃13;

$.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);

＆＃13;

<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>

＆＃13;

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

jQuery动画无限无效

1 个答案: