Question

我想在连续悬停时将颜色与变化相关联，但它永远不会按照我想要的方式运行 - 它不会停留在mouseleave / hover out，您可以在此fiddle中看到它：

  var interv;

  function changeColors(item) {
    interv = setInterval(function() {
      $(item).animate({
          color: 'red'
        }, 1000)
        .animate({
          color: 'green'
        }, 1000);
    }, 100);
  };

  $(document).ready(function() {

    $('a')
      .mouseenter(function() {
        changeColors(this);
      })
      .mouseleave(function() {
        clearInterval(interv);
        $(this).removeAttr("style");
      });


  });

然后我尝试重新创建comment建议的内容，但正如您在此fiddle中看到的那样，它也不起作用：

    $(document).ready(function() {
  var interval;
  $('a').hover(
    function() {
      if (interval)
        clearInterval(interval);
      interval = setInterval(function() {
        $('a').animate({
            color: 'red'
          }, 1000)
          .animate({
            color: 'green'
          }, 1000);
      }, 10);
    },
    function() {
      clearInterval(interval);
      interval = null;
      $(this).removeAttr("style");
    }
  );
});

Answer 1

在你的CSS中你需要设置过渡，这些过渡处理你的动画：

a {
  transition: all 1000ms ease-in-out;
  -webkit-transition: all 1000ms ease-in-out;
}

在JS文件中，您只需通过jQuery设置CSS，而不是依赖.animate()，这使您可以通过CSS控制简单动画：

var int;

function changeColors(item, currentColor) {
    int = setInterval(function() {

        $(item).css({
            color: currentColor
        }, 1000)

        if (currentColor == 'red') {
            currentColor = 'green';
        } else {
            currentColor = 'red';
        }

    }, 1000);
};

$(document).ready(function() {

    $('a').mouseenter(function() {

        changeColors(this, 'red');

    });

    $('a').on('mouseleave', function() {

        $(this).removeAttr('style');
        clearInterval(int);

    });
});

对于那些正在寻找使用随机颜色做类似事情的人：

Random color generator

clearInterval无法处理mouseleave

1 个答案: