在超时期间更改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'); })
演示: 小提琴