Анимация jQuery внутри hover () срабатывает только во второй раз

Я использую jQuery для анимации изменения высоты при наведении ().

При наведении курсора он применит класс .hover, а при щелчке - переключит класс .expanded. В основном это работает, с правильной анимацией, но только после первого раза. При первом наведении анимация полностью пропадает.

Я в тупике - вот оскорбительный код:

$('#expandingbox').hover(

    /*on mouseenter, if not expanded, add hover class*/
    function() {
    if (!$(this).hasClass("expanded")) {
        $(this).stop(true, true).addClass("hover", "slow");
    }},

    /*on mouseout, if not expanded, remove hover class*/
    function() {
    if (!$(this).hasClass("expanded")) {
        $(this).stop(true, true).removeClass("hover", "slow");
    }
}).click(function() {
    $(this).toggleClass("expanded", "slow");
});

Я где-то обнаружил, что добавление $ ('# expandingbox'). Trigger ('mouseout') решит эту проблему, но у меня это не сработало. А вот пример, воспроизводящий проблему: http://jsfiddle.net/Qc42v/

ОБНОВЛЕНИЕ: отправили заявку, и оказалось, что это ошибка jQuery. Тот же код работает с jQuery 1.5 (и последней версией jQuery UI).


jquery jquery-ui jquery-hover
person joseph    schedule 11.06.2011    source источник
comment
Рассматривали ли вы возможность использования анимации?   -  person ngen    schedule 11.06.2011
comment
@ngen Полагаю, мне следует просто выбрать то, что работает - сейчас я воспользуюсь animate () и сообщу об ошибке, как предложил @pixelfreak.   -  person joseph    schedule 11.06.2011

Ответы (1)


arrow_upward
2
arrow_downward

Это может быть законная ошибка пользовательского интерфейса jQuery. Предварительное добавление какого-то случайного класса, кажется, исправляет это для меня. Проверьте: http://jsfiddle.net/Qc42v/9/

Так в основном вот так:

/*on mouseenter, if not expanded, add hover class*/
function() {
if (!$(this).hasClass("expanded")) {
    $(this).addClass("xxx");
    $(this).stop(true, true).addClass("hover", "slow");
}},

Если вам это кажется слишком неприятным, может быть, просто использовать базовую функцию animate ()? Кто-то обязательно должен сообщить об ошибке: {

person pixelfreak    schedule 11.06.2011
comment
Не могу поверить, что это работает! Как вы думали об этом? Думаю, я запишу ошибку и попробую использовать animate (). Я никогда этим не пользовался, так что, наверное, пора было выучить это! Спасибо! - person joseph; 11.06.2011