代码之家 › 专栏 › 技术社区 › Zach Ioannou

jquery在mouseout上停止无限动画

jquery

Zach Ioannou · 技术社区 · 9 年前

我有4个分区,根据另一个分区的鼠标悬停无限期地淡入,这一切都很好。然而,我希望动画停止在mouseout,但这似乎不工作。

$("#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/

2 回复 | 直到 9 年前

Rory McCrossan Hsm Sharique Hasan 9 年前

说到用户界面,如果可能的话,最好使用CSS。因此,可以使用关键帧动画和 :hover 伪选择器。默认情况下,这会提供“鼠标悬停”行为。

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

sissy 9 年前

我可以在您的代码中看到几个错误:

为什么要使用两个不同的选择器来触发事件:鼠标悬停时是#live,因为鼠标悬停时是#liveMusic(我在片段中看不到)。
其次,在if/else条件之外调用fn(),因此即使清除超时,也会连续调用它。

    $("#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