изменить цвет 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).

Мне нужно оставить остальную часть этого поведения точно такой, какая она есть, что означает, что красная рамка обычно должна вернуться к умолчанию после тайм-аута.

пояснение:

тайм-аут/задержка срабатывает после выхода из мыши и длится 1 секунду.

  • текущая ситуация: если вы снова войдете в div до истечения 1 секунды, тайм-аут будет удален, а затем снова запустится после еще одного выхода из мыши
  • нужная ситуация: если вы снова войдете в div до истечения 1 секунды, граница станет красной, время ожидания будет удалено, а затем снова сработает после еще одного выхода из мыши

function html jquery mouseenter
person weaponx    schedule 27.08.2013    source источник
comment
Пожалуйста, уточните свой вопрос.. Трудно понять, чего вы действительно хотите..   -  person Sid    schedule 27.08.2013
comment
Какая красная граница? Я не вижу ничего красного в вашем коде.   -  person Rob    schedule 27.08.2013
comment
Когда закончите, удалите timerMouseleave из .data(). Таким образом, если timerMouseleave существует в .data() элемента, это означает, что тайм-аут не из-за этого. (Надеюсь, я правильно понял ваш вопрос)   -  person naor    schedule 27.08.2013
comment
Я отредактировал вопрос. Если что-то еще непонятно, спрашивайте.   -  person weaponx    schedule 27.08.2013

Ответы (1)


arrow_upward
0
arrow_downward

Пытаться

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

Демонстрация: Fiddle

person Arun P Johny    schedule 27.08.2013
comment
Удивительно! Огромное спасибо! - person weaponx; 27.08.2013
comment
Эй, Арун, у меня есть один конкретный вопрос относительно координат: stackoverflow.com/questions/18811991/ - person weaponx; 15.09.2013
comment
Эй, Арун, так как твоя помощь действительно много значила для меня, я хотел бы как-то отплатить тебе (односторонне - на мне, но было бы полезно для нас обоих) - если у тебя есть сайт/блог/и т.д. и если вас интересуют подробности, я здесь - [email protected] - person weaponx; 09.11.2013