0

今、私はこのコードを持っています:

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

この動作の残りの部分をそのまま維持する必要があります。つまり、通常、タイムアウト後に赤い境界線がデフォルトに戻るはずです。

明確化:

timeout / delay は mouseleave の後にトリガーされ、1 秒間続きます。

  • 現在の状況: 1 秒が経過する前に div を再度入力すると、タイムアウトが削除され、別の mouseleave の後に再びトリガーされます
  • 必要な状況: 1 秒が経過する前に div を再度入力すると、境界線が redになり、タイムアウトが削除され、別の mouseleave 後に再びトリガーされます
4

1 に答える 1

0

試す

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

デモ:フィドル

于 2013-08-27T15:23:17.520 に答える