在超时期间更改mouseenter上的div颜色 – jquery函数

现在我有这个代码:

$('.a').mouseenter(function(){ var $this = $(this); clearTimeout($this.data('timerMouseleave')); $this.css('border', 'solid 1px #444444') }).mouseleave(function(){ var $this = $(this); var timer = setTimeout($.proxy(function(){ $this.css('border', 'solid 1px #dddddd') }, this), 1000) $this.data('timerMouseleave', timer) }).click(function(){ var $this = $(this); $this.css('border', 'solid 1px black') $this.off('mouseenter mouseleave'); }) 

http://jsfiddle.net/7dXAs/6/

我想在超时仍然打开的情况下再次输入div时添加红色边框。 (如果可能的话,请包括在这种情况下播放声音,例如aaa.wav)。

我需要完全保持这种行为的其余部分,这意味着红色边框通常应该在超时后更改回默认值。

澄清

mouseleave后触发超时/延迟并持续1秒。

  • 当前情况:如果在1秒到期之前再次输入div,则会删除超时,然后在另一次mouseleave之后再次触发
  • 想要的情况:如果你在1秒到期之前再次输入div, 边框变为红色 ,超时被删除,然后在另一个mouseleave之后再次触发

尝试

 $('.a').mouseenter(function(){ var $this = $(this); clearTimeout($this.data('timerMouseleave')); if($this.hasClass('hide-timer')){ $this.css('border', 'solid 1px red') } else { $this.css('border', 'solid 1px #444444') } }).mouseleave(function(){ var $this = $(this); var timer = setTimeout($.proxy(function(){ $this.css('border', 'solid 1px #dddddd').removeClass('hide-timer') }, this), 1000) $this.data('timerMouseleave', timer).addClass('hide-timer') }).click(function(){ var $this = $(this); $this.css('border', 'solid 1px black') $this.off('mouseenter mouseleave'); }) 

演示: 小提琴