JQuery + MouseOver 重置淡出

Question

我有以下代码，显示一个下拉框，该下拉框淡出然后被删除:

$('.containerDIV').show().fadeOut(10000, function() {$(this).remove();});

上面的代码运行良好，但我想更新它，这样如果用户将鼠标放在 $('.containerDIV') 上，淡出就会停止，当鼠标移出时，淡出会再次开始。

希望有人能插入我朝正确的方向前进。

Answer 1

一种解决方案是使用.stop(true, false) ，这将停止任何当前动画并清除动画队列。然后你可以使用fadeIn(0)立即再次显示 div。

// Cache DIVs
var $containerDIVs = $('.containerDIV');

// Start Initial Fade
FadeAndRemove($containerDIVs);

// On mouseover, stop fade and show again
$containerDIVs.on("mouseover", function(e) {
  $(this).stop(true /*, false implied */ ).fadeIn(0);
});

// On mouse leave, start fade again
$containerDIVs.on("mouseleave", function(e) {
  FadeAndRemove(this);
});

// Fading function
function FadeAndRemove(els) {
  $(els).fadeOut(10000, function() {
    $(this).remove();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="containerDIV">
  testing 123
  <select>
    <option>1</option>
  </select>
</div>

参见Fiddle