Блог

Главная - Вопросы по программированию - jquery hoverclass удален после анимации

jquery hoverclass удален после анимации

#jquery

#jquery

Вопрос:

У меня есть div, который я делаю перетаскиваемым, используя следующий код:

 $("#start").droppable({
    hoverClass: 'startHover',
    drop: handleStartDropEvent,
    tolerance: "pointer",
    accept: ".cell",
    containment: ".cascade",
});

затем где-то в моем коде я анимирую этот же div, используя этот код:

 var formHtml = $("#form")[0].outerHTML;
if ((formHtml.indexOf("row") <= 0)) {
    alert("Warning: An empty form cannot be submitted");
    $("#start").css("background-color", "red");
    $("#start").css("color", "white");
    $("#start").animate({
        backgroundColor: "initial",
        color: "black"
    }, 700);
    return false;
}

Я заметил, что после анимации hoverclass этого div больше не работает. Его по-прежнему можно перетаскивать, но он не изменяет класс при наведении курсора мыши, как это было до анимации.

Я попытался снова установить hoverclass после анимации, но это не сработало.

Есть идеи?

Комментарии:

1. Как вы можете определить, что класс не добавлен? Если он основан на цвете и / или цвете фона, вы выполнили вызовы css , которые переопределят класс в случае этих свойств.

2. вы правы! позвольте мне ответить на мой пост с правильным решением

Ответ №1:

Джеймс Монтань прав, решение состояло в том, чтобы удалить эти атрибуты после завершения анимации, например:

 var formHtml = $("#form")[0].outerHTML;
if ((formHtml.indexOf("row") <= 0)) {
    alert("Warning: An empty form cannot be submitted");
    $("#start").css("background-color", "red");
    $("#start").css("color", "white");
    $("#start").animate({
        backgroundColor: "initial",
        color: "black"
    }, 700, function () { $("#start").attr('style', ''); });
    return false;
}

Приветствую Джеймса!

Ответ №2:

Для немного менее жесткого подхода (чем удаление всего атрибута стиля, как в вашем решении), вы также можете просто очистить соответствующие свойства css следующим образом:

 $("#start").css("background-color", "red");
$("#start").css("color", "white");
$("#start").animate({
    backgroundColor: "initial",
    color: "black"
}, 700, function () { 
    $("#start").css('color', '')
               .css('background-color', ''); 
});

Это очистит свойства color и background-color css, чтобы css, определенный для нашего класса наведения, мог вступить в силу.