jQuery - проблема совместимости с Internet Explorer 7?

У меня есть этот код, который динамически перемещает Div поверх изображения при наведении на него мыши. Он отлично работает в Firefox и Google Chrome, но в Internet Explorer 7 все работает очень медленно и ничего не происходит.

Код jquery таков:

jQuery.fn.masque = function(class) {

$(this).hover(function(){
$(this).find(class).stop().animate({height:'100px',opacity: '0.9'},400);
},function () { 
$(this).find(class).stop().animate({height:'0',opacity: '0'}, 300);
});
}
$(document).ready(function(){$('.thumb').masque('.masque');});

HTML:

<div class="thumb bg25">
    <a href="#"><img src="img/image.jpg" alt="Something" /></a>
        <div class="masque">
            <h3 class="someclass"><a href="#" >Some text here</a></h3>
            <p class="someclass">Some text here</p>
            <p class="someclass">Some text here</p>
        </div>
</div>

А это CSS:

.thumb {float:left; margin:0 14px 14px 0; width:126px; height:186px; padding:10px; position:relative;}

.masque{position:absolute; background:#212326; width:118px; bottom:10px; height:0; padding:4px; display:none;}

Я запускаю его с локальной машины, а не на сервере.

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


javascript jquery internet-explorer cross-browser
person Jonathan    schedule 08.02.2009    source источник
comment
Если вам нужно, вот CSS: .thumb {float: left; маржа: 0 14px 14px 0; ширина: 126 пикселей; высота: 186 пикселей; отступ: 10 пикселей; позиция: относительная;} .masque {позиция: абсолютная; фон: # 212326; ширина: 118 пикселей; внизу: 10 пикселей; высота: 0; отступ: 4 пикселя; display: none;}   -  person Jonathan    schedule 09.02.2009
comment
@Jonathan - лучше бы отредактировать свой вопрос и добавить CSS в блок кода :)   -  person Russ Cam    schedule 09.02.2009

Ответы (1)


arrow_upward
1
arrow_downward

Вы пробовали снять стоп ()? Я полностью снимаю в темноте, но думаю, что IE7 может по-другому ставить вызовы в очередь. Сейчас протестирую.

Обновлять

После тестирования я получаю некоторые странные ошибки в IE7 из-за переменной с именем class. Это должно быть какое-то ключевое слово. Попробуй это.

jQuery.fn.masque = function(classSelector) {
        $(this).hover(function(){
                $(this).find(classSelector).stop().animate({height:'100px',opacity: '0.9'},400);
        },function () {
            $(this).find(classSelector).stop().animate({height:'0',opacity: '0'}, 300);
        });
};

Обновлять

вы пробовали использовать slideUp и slideDown?

jQuery.fn.masque = function(classSelector) {
    $(this).hover(function(){
        $(this).find(classSelector).slideDown();
    },function () {
        $(this).find(classSelector).slideUp();
    });
};
person bendewey    schedule 08.02.2009
comment
Спасибо! Если вам нужно, вот CSS: .thumb {float: left; маржа: 0 14px 14px 0; ширина: 126 пикселей; высота: 186 пикселей; отступ: 10 пикселей; позиция: относительная;} .masque {позиция: абсолютная; фон: # 212326; ширина: 118 пикселей; внизу: 10 пикселей; высота: 0; отступ: 4 пикселя; display: none;} - person Jonathan; 09.02.2009
comment
Кстати, в будущем вместо добавления css к комментарию добавьте его в свой пост, но обратите внимание на это добавление в комментарии. - person bendewey; 09.02.2009
comment
Спасибо, теперь я вижу, как div скользит вверх в IE7, но он все еще очень медленный, плохо позиционированный и глючный ... Может быть, есть лучший способ его кодирования? - person Jonathan; 09.02.2009
comment
Кстати, это код, который я скопировал с www.foliostars.net и изменил его ... так что я действительно не понимаю jQuery ... - person Jonathan; 09.02.2009
comment
Какого размера ваше изображение. - person bendewey; 09.02.2009
comment
Использование slideUp и slideDown дает мне такое же ошибочное поведение в IE ... Возможно, мне нужно протестировать его на сервере, а не на моем локальном компьютере ... - person Jonathan; 09.02.2009
comment
@bendewey - вы можете сотрудничать с OP, используя jsbin.com. Он отлично работает для демонстрационного кода. - person Russ Cam; 09.02.2009