Абсолютно позиционированные элементы не анимируются с помощью Jquery SlideToggle в ie7 - PullRequest
1 голос
/ 20 марта 2012

У меня есть скрытый раздел в моем HTML, который отображается и скрывается при нажатии кнопки с помощью функции JQuery 'slideToggle'.

Эта кнопка находится ниже скрытого содержимого и успешно анимируется во всех браузерах, кроме ie7, есть ли способ заставить ее анимироваться без необходимости перезаписывать кнопку, чтобы она не позиционировалась абсолютно?

<div class="hiddenContent">
<p>Hidden content is in here</p>
</div>
<div class="showmorecontainer">
<a class="showmore" href="#">SHOW</a>
</div>

Спасибо

Я добавил немного CSS и JQuery для контекста (обратите внимание, что приведенный выше HTML был упрощен)

CSS - .showmorecontainer { высота: 24px; } * +1010 *

.showmore{
position:absolute;
left:0px;
bottom:0px;
height:22px;
background-image:url('../images/showmore.png');
background-repeat:no-repeat;
width:330px;
display:block;
padding-left:195px;
padding-top:2px;
}

JQuery -

$(".showmore").click(function(e) {
    $(this).parent().parent().find('.hiddenContent').slideToggle('slow',      function() {
        if($(this).is(":hidden")){
            $(this).parent().find('.showmore').html('SHOW ME MORE');
            $(this).parent().find('.arrow').removeClass('arrowup');
        }
        else{
            $(this).parent().find('.showmore').html('CLOSE BACK UP');
            $(this).parent().find('.arrow').addClass('arrowup');
        }
    });
    e.preventDefault();
});

Ответы [ 2 ]

0 голосов
/ 21 марта 2012

Это, похоже, проблема с CSS в IE7.Абсолютно расположенные элементы не оживляют, а переходят к конечной точке.Я решил это, просто избавившись от абсолютного позиционирования и используя вместо этого отрицательные поля.

0 голосов
/ 21 марта 2012

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

$(this).parent().parent().find('.hiddenContent').slideToggle('slow', function() {

... на это ...

$(this).parents().find('.hiddenContent').slideToggle('slow', function() {

... может помочь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...