Исчезновение фона при наведении курсора на поле

Я уже задавал это предположение раньше. Но сейчас я постараюсь быть более конкретным.

Я пытаюсь сделать фон плавным, когда вы наводите курсор мыши на поле. Я пробовал 2 разных варианта.

Вариант 1: Box1 - это поле, на которое он наводит курсор, а hover1 - это новый фон, который появляется. Это действительно работает очень хорошо. Тем не менее, он загружает acript, что означает, что если я просто сойду с ума, наведя указатель мыши на поле, исчезновение будет продолжаться бесконечно, даже когда моя мышь стоит на месте. Есть ли способ остановить это? Содержимое - это текст, который изменяется в поле содержимого при наведении указателя мыши. Это прекрасно работает.

$("#box1").mouseover(function(){
    $("#background").switchClass("nohover", "hover1", 500);
    $("#content").html(box1);

});

$("#box1").mouseout(function(){
    $("#background").switchClass("hover1", "nohover", 150);
    $("#content").html(content);

});

Вариант 2: здесь я добавляю класс hover2 и прошу его исчезнуть и исчезнуть. Но это совсем не работает. Иногда он даже удаляет все сбоку, когда я вынимаю мышку из коробки.

$("#box2").mouseover(function(){
    $("#background").addClass("hover2").fadeIn("slow") 
    $("#content").html(box3);
});

$("#box2").mouseout(function(){
    $("#background").removeClass("hover2").fadeOut("slow")
    $("#content").html(content);
});

Использую jquery ui. Я очень надеюсь, что кто-нибудь сможет мне помочь!


javascript jquery mouseover jquery-ui fade
person Community    schedule 10.05.2012    source источник
comment
switchclass это плагин? Похоже, вам нужно добавить stop() перед вызовом animate(), предполагая, что вы можете изменить источник.   -  person Rory McCrossan    schedule 10.05.2012
comment
Да, SWichClass - это плагин от jquery ui.   -  person    schedule 10.05.2012

Ответы (2)


arrow_upward
1
arrow_downward

Вы также можете попробовать внести небольшие изменения в разметку / CSS.

HTML:

<div id="box">
    <div id="background"></div>
    <div id="content"></div>
</div>

CSS:

#box {
    position: relative;
    /* ... */
}
#background {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: url(...);
    z-index: -1;
}​

JavaScript:

$("#box").hover(function() {
    $("#background").fadeIn();
}, function() {
    $("#background").stop().fadeOut();
});​

ДЕМО: http://jsfiddle.net/bRfMy/

person VisioN    schedule 10.05.2012
comment
Анимация непрозрачности работает лучше, чем fadeIn / fadeOut: jsfiddle.net/bRfMy/1 - person Hubro; 10.05.2012
comment
@Codemonkey Почему они делают то же самое? - person VisioN; 10.05.2012
comment
Они этого не делают. fadeIn и fadeOut также управляют свойством отображения. Просто попробуйте быстро двигать мышь внутрь и наружу, используя свое решение, а затем попробуйте мое - person Hubro; 10.05.2012

arrow_upward
0
arrow_downward

Попробуйте добавить переменную для управления выполнением эффекта только тогда, когда эта переменная имеет определенное значение. И измените его значение, когда эффект был выполнен.

Что-то вроде этого:

var goeft = 0;
$("#box1").mouseover(function(){
  if(goeft == 0) {
    $("#background").switchClass("nohover", "hover1", 500);
    $("#content").html(box1);
    goeft = 1;
  }
});

$("#box1").mouseout(function(){
    $("#background").switchClass("hover1", "nohover", 150);
    $("#content").html(content);
    // sets its value back to 0 if you want the next mouseover execute the effect again
    goeft = 0;
});
person CoursesWeb    schedule 10.05.2012
comment
Большое спасибо за ответ .. Но это все равно не останавливает анимацию, если я наведу курсор мыши, но очень быстро несколько раз. - person ; 10.05.2012