如何在鼠标移出时添加一秒延迟答案

【问题标题】：How to add a one second delay on mouseout如何在鼠标移出时添加一秒延迟
【发布时间】：2013-03-04 08:21:17
【问题描述】：

我以为这很简单，但错了...尝试使用 .delay 和其他在线找到的方法的组合，但无法让它在没有错误的情况下工作。

当您将鼠标移离 .hover-area 时，我只想添加一秒钟的延迟...有什么想法吗？？

提前致谢！！！

$('.forward').css({ opacity:0, right:-20 });
$('.backward').css({ opacity:0, left:-20 });

$('.hover-area').hover(function () {
  var conf_1 = { queue:false, duration:300, easing:'easeOutCubic' };
  var conf_2 = { queue:false, duration:400, easing:'easeOutCubic' };

  $(this).find('.backward, .forward').each(function () {
    $(this).stop()
      .animate($(this).data('animate-on'), conf_1)
      .animate({ opacity:0.7 }, conf_2);
  });
}, function() {
  var conf_1 = { queue:false, duration:550, easing:'easeOutSine' };
  var conf_2 = { queue:false, duration:300, easing:'easeOutSine' };

  $(this).find('.backward, .forward').each(function () {
    $(this).stop()
      .animate($(this).data('animate-off'), conf_1)
      .animate({ opacity:0 }, conf_2);
  });
});

【问题讨论】：

你试过.delay jQuery方法吗？
是的，但无法正常工作。

标签： jquery performance animation

【解决方案1】：

一切似乎都很好，只需在 .stop() 之后在 your callback function 中执行 .delay() 试试这个：

$(this).find('.backward, .forward').each(function () {
$(this).stop().delay(1000)
  .animate($(this).data('animate-off'), conf_1)
  .animate({ opacity:0 }, conf_2);
});

我在这里所做的只是在你mouseout 回调function() 中添加了一个.delay()。

【讨论】：

你能解释一下你用这段代码做什么吗？
只是added a delay to the mouseout函数。
我的意思是让你编辑你的答案并添加解释......你的答案出现在低质量审查队列中，因为它主要是一段代码。干杯:)

【解决方案2】：

我认为您可以简单地使用setTimeout 来做到这一点。将您的整个代码包装在您要在 mouseout 上执行的函数中，并将其与 setTimeout 放在一起。

看看这个样本或试试这个小提琴http://jsfiddle.net/mvcGN/

HTML

<div id="test">
</div>

CSS

#test{
    width:200px;
    height:200px;
    background-color:#000;
}

JQuery

jQuery(document).ready(function($){
    $('#test').hover(function(){
        $(this).css("background-color","#456765");
    },function(){

//wrap your code in a function like this
        function do_it_after_delay(){
        $('#test').css('background-color','#567324');
        }


//simply use setTimeout to execute is with a delay
    setTimeout(do_it_after_delay,5000);

    });
});

当您的鼠标进入DIV 时，此代码将更改#test 的颜色，并在鼠标离开DIV 5 秒后再次更改颜色

【讨论】：