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

Answer 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/

JQuery + MouseOver重置FadeOut

2 个答案: