Question

我认为这很简单，但是错了...尝试使用.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);
  });
});

Answer 1

一切似乎没问题，只需在.delay() .stop()之后执行your callback function尝试：

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

我在此处所做的只是在.delay()回调mouseout中添加function()。

Answer 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);

    });
});

当您的鼠标进入#test时，此代码会更改DIV的颜色，并在鼠标离开DIV

5秒后再次更改颜色

如何在mouseout上添加一秒延迟

2 个答案: