JQuery: animate () не работает должным образом в IE - PullRequest
Новая
       17

JQuery: animate () не работает должным образом в IE

5 голосов
/ 02 декабря 2008

Я схожу с ума с этим IE 7 ...

==> ч http://neu.emergent -innovation.com /

Почему следующая функция не работает в IE 7, но отлично работает с Firefox? Есть ли ошибка в функции animate? 

function accordion_starting_page(){
    // hide all elements except the first one
    $('#FCE-Inhalt02-ContentWrapper .FCE-Fade:not(:first)').css("height", "0").hide();
    $('#FCE-Inhalt02-ContentWrapper .FCE-Fade:first').addClass("isVisible");

    $('div.FCE-Title').click(function(){

        // if user clicks on an already opened element => do nothing
        if (parseFloat($(this).next('.FCE-Fade').css("height")) > 0) {
            return false;
        }

        var toHide = $(this).siblings('.FCE-Fade.isVisible');

        toHide.removeClass("isVisible");

        // close all opened siblings
        toHide.animate({"height": "0", "display": "none"}, 1000);

        $(this).next('.FCE-Fade').addClass("isVisible").animate({"height" : "200"}, 1000);

        return false;
    });
}

Большое спасибо за помощь ...

Большое спасибо, это были отличные советы! К сожалению, это все еще не работает ...

Проблема в том, что IE отображает содержимое обоих контейнеров до тех пор, пока анимация не закончится ... Firefox ведет себя корректно ... Я думал, что это "переполнение: скрыто" - но это ничего не изменило. *

Я уже пробовал плагин для гармошки, но он ведет себя точно так же ...

Ответы [ 8 ]

8 голосов
/ 29 января 2009

Я столкнулся с аналогичной проблемой с функцией animate и был удивлен, когда показывал ошибку, исходящую из базовой библиотеки jQuery. Тем не менее, jQuery в порядке, его IE вам нужно обслуживать.

При анимации любого атрибута элемента в IE вам необходимо убедиться, что в вашем CSS есть начальная точка для атрибута, который вы собираетесь изменить. Это относится и к Safari.

Например, непрерывно перемещая div влево,

JQuery: 

var re = /px/;
var currentLeft = $("#mydiv").css('left').replace(re,'') - 0;
$("#mydiv").css('left',(currentLeft-20)+'px');

CSS: 

#mydiv { position: absolute;    top: 0;    left: 0; }

Если вы НЕ ставите левую и верхнюю стартовую позицию, IE в конечном итоге выдаст ошибку.

Надеюсь, это поможет

1 голос
/ 31 мая 2011

После дня размышлений, ПОЧЕМУ IE не будет анимировать материал, я обнаружил, что некоторые версии JQuery больше не делают то, что раньше:

Это: 

$('#bs1').animate({
    "left": bs1x
}, 300, function() {
    // Animation complete.
});

НЕ будет работать с этим Jquery: https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

но он работает с: https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

ура старые версии!

1 голос
/ 31 марта 2010

Как сказал Павел, при использовании метода. Animate () jQuery браузер IE7 не распознает внутренне свойство 'position'. например,

Правило CSS: 

li p (bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)

Реализация анимации в jQuery: 

$('li').hover(function(){

              $this = $(this);

              var bottom = '-45px'; //valor default para subir.

              if( $this.css('height') == '320px' ){bottom = '-115px';}

              $this.css('cursor', 'pointer').find('p').stop().find('.first').hide().end().animate({bottom: bottom}, {queue:false, duration:300});

      }, function(){

         var $this = $(this);

         var bottom = '-178px'; //valor default para descer

            if( $this.css('height') == '320px' ){bottom = '-432px';}

         $this.find('p').stop().animate({***position: 'absolute'***, bottom:bottom}, {queue:false, duration:300}).find('.first').show();

      });//fim do hover()

Что работать во всех браузерах:

Правило CSS: 

li p (position: absolute; left: 0; bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)

Код JQuery: 

   $('li').hover(function(){

                 $this = $(this);

         var bottom = '-45px'; //valor default para subir.

              if( $this.css('height') == '320px' ){bottom = '-115px';}

              $this.css('cursor', 'pointer').find('p').stop().find('.first').hide().end().animate({bottom: bottom}, {queue:false, duration:300});

      }, function(){

         var $this = $(this);

         var bottom = '-178px'; //valor default para descer

            if( $this.css('height') == '320px' ){bottom = '-432px';}

         $this.find('p').stop().animate({bottom:bottom}, {queue:false, duration:300}).find('.first').show();

      });//fim do hover()

В моем случае это было решено таким образом.

0 голосов
/ 12 января 2011

Это может быть не по теме, но я играю с JQuery и его замечательно, но будучи новичком в Javascript, я не осознавал, что IE 7 и IE 8 не распознают ключевое слово const. Вот что мешало запуску JQuery, это не проблема с анимацией ... надеюсь, это может помочь какой-то отчаянной душе. Человек, которого я не могу дождаться, чтобы вернуться к старому доброму AS3 и Flex ..

см http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/JSConstKeyword.html

для более

0 голосов
/ 13 мая 2010

Измените продолжительность для IE. Сделайте это на 1/10 того же, что и в FF, и оно должно быть примерно одинаковым в обоих браузерах:

FF 

$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 200});

IE 

$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 20});

Должно это исправить.

0 голосов
/ 02 декабря 2008

У меня недавно была проблема, когда animate () не работал должным образом, и это было из-за того, что IE отображал мои CSS-отступы: свойства отличаются от FireFox.

Это, похоже, произошло с другими людьми, и мне пришлось взломать мой css; вместо этого используя поля и фиксированную ширину и другие подобные ужасные хаки IE.

0 голосов
/ 02 декабря 2008

Вы можете использовать селектор jQuery: visible вместо переключения класса isVisible.

Также ваша анимация выглядит функционально так же, как slideUp (1000).

0 голосов
/ 02 декабря 2008

Я не уверен, в чем именно проблема ... возможно, вы не можете анимировать "display: none"? Попробуйте это: 

toHide.animate({ height : 0 }, 1000, function() { $(this).hide(); });

... подумал, похоже, что могут быть некоторые другие проблемы с контейнером, на котором не установлен overflow: hidden.

Лучшим способом было бы избежать повторного изобретения колеса: плагин jQuery UI имеет встроенный аккордеон. http://docs.jquery.com/UI/Accordion Я уверен, что благородный мистер Ресиг и Ко уже справился с любыми ошибками, с которыми вы можете столкнуться.

...