JQuery + MouseOver 重置淡出答案

【问题标题】：JQuery + MouseOver Reset FadeOutJQuery + MouseOver 重置淡出
【发布时间】：2015-07-26 00:04:21
【问题描述】：

我有以下代码显示一个淡出然后被删除的下拉框：

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

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

希望有人可以推动我朝着正确的方向前进。

【问题讨论】：

我认为你必须编写自己的 fadeOut 来支持它。您可能只是复制 jquery 方法，并添加一个事件挂钩来暂停。

标签： jquery

【解决方案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

【讨论】：

【解决方案2】：

jQuery .stop() 命令将中断任何当前动画、切换或淡入其当前位置。

看看这个 stop() 示例，并将多个事件链接到同一个函数。

function fadeHandler(e){
    $(this).fadeOut(5000, function(){
        $(this).remove();
    })
}

$('.containerDIV').show(fadeHandler).mouseout(fadeHandler)
$('.containerDIV').mouseover(function(){$(this).stop()})

http://jsfiddle.net/0j680L1t/

【讨论】：