在超时期间更改mouseenter上的div颜色 - jquery函数 [英] change div color on mouseenter during timeout - jquery function

问题描述

  $（'。a'）。mouseenter（function（）{
 var $ this = $（this）; 
 clearTimeout（$ this.data（'timerMouseleave'））; 
 $ this.css（'border'，'solid 1px＃444444'）
 $ var $ this = $（this）; 
 var timer = setTimeout（$。proxy（function（）{
 $ this.css（$ b $）}。 '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， border变为红色，超时被删除，然后在另一个mouseleave之后再次触发 试试 $ b $
b

  $（'。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'）; 
}）
  

演示：小提琴

Right now I have this code:

$('.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/

I want to add the red border only in case of entering the div again while the timeout is still on. (if possible, please also include playing sound in this case, for ex. aaa.wav).

I need to keep the rest of this behavior exactly as it is, which means that red border should normally change back to default after the timeout.

clarification:

timeout / delay gets triggered after mouseleave and it lasts 1 second.

• current situation: if you enter the div again before 1 second expires, timeout gets removed and then triggered again after another mouseleave
• wanted situation: if you enter the div again before 1 second expires, border becomes red, timeout gets removed and then triggered again after another mouseleave

解决方案

Try

$('.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');
})

Demo: Fiddle

这篇关于在超时期间更改mouseenter上的div颜色 - jquery函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！