Question

我有4个div，根据另一个div的鼠标悬停无限期地淡入，这一切都很好。但是，我希望动画停止鼠标输出，但这似乎不起作用。

$("#live").mouseover(function() {
  fadeloop('#live-step1', 100, 200, true);
  fadeloop('#live-step2', 100, 200, true)
  fadeloop('#live-step3', 100, 200, true);
  fadeloop('#live-step4', 100, 200, true);
});

$("#liveMusic").mouseout(function() {
  fadeloop('#live-step1', 100, 200, false);
  fadeloop('#live-step2', 100, 200, false);
  fadeloop('#live-step3', 100, 200, false);
  fadeloop('#live-step4', 100, 200, false);
});

function fadeloop(el, timeout, timein, loop) {
  var $el = $(el),
    intId, fn = function() {
      $el.fadeOut(timeout).fadeIn(timein);
    };
  fn();
  if (loop) {
    intId = setInterval(fn, timeout + timein + 100);
    return intId;
  } else {
    clearInterval(intId);
  }
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="height:550px;width:550px;">
  <div id="live" style="width:50px;height:50px;;background-color:gray">hover</div>
  <div id="live-step1" style="width:50px;height:50px;background-color:#ffffff">step1</div>
  <div id="live-step2" style="width:50px;height:50px;background-color:#ffffff">step2</div>
  <div id="live-step3" style="width:50px;height:50px;background-color:#ffffff">step2</div>
  <div id="live-step4" style="width:50px;height:50px;background-color:#ffffff">step4</div>
</div>

https://jsfiddle.net/uosww7bm/2/

Answer 1

说到用户界面，尽可能使用CSS更为可取。因此，您可以使用关键帧动画和@keyframes fadeAnimation { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } body { background-color: #EEE; } .container { height: 550px; width: 550px; } .container div { width: 50px; height: 50px; background-color: #FFF; } .container #live { background-color: gray; } .container #live:hover ~ div { animation: fadeAnimation .4s infinite; }伪选择器来实现此目的。默认情况下，这会为您提供“暂停鼠标”行为。

另请注意，您应该删除内联样式并将它们放在外部样式表中，如下所示：

<div class="container">
  <div id="live">hover</div>
  <div>step1</div>
  <div>step2</div>
  <div>step2</div>
  <div>step4</div>
</div>

HTTPClient

Answer 2

我可以在你的代码中看到几个错误：

为什么你使用两个不同的选择器来触发事件：鼠标悬停时是#live，因为mouseout是#liveMusic（我在代码片段中看不到）。
其次，您在if / else条件之外调用fn（），因此即使您正在清除超时，它也会被连续调用。

我已经更新了您的代码段，只使用了一个div，但结果与其他内容相同。

    $("#live").mouseover(function() {
  fadeloop('#live-step1', 100, 200, true);
});

$("#live").mouseout(function() {
  fadeloop('#live-step1', 100, 200, false);
});
var intId;
function fadeloop(el, timeout, timein, loop) {

  var $el = $(el),
     fn = function() {
      $el.fadeOut(timeout).fadeIn(timein);
    };
  if (loop) {
    intId = setInterval(fn, timeout + timein + 100);
  } else {
    clearInterval(intId);
  }
  return false;
}

请在此处查看updatedFiddle

jquery在mouseout上停止无限动画

2 个答案: