JQuery:animate() не работает должным образом в IE
https://stackoverflow.com/questions/333911
-
22-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я схожу с ума от этого IE 7...
==> hhttp://neu.emergent-innovation.com/
Почему следующая функция не работает в IE 7, но отлично работает в Firefox?Есть ли ошибка в функции анимации?
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 ведет себя правильно...Я думал, что дело в «переполнении:скрыто" - но это ничего не изменило.
Я уже пробовал плагин-аккордеон, но он ведет себя точно так же...
Решение
Как заявил Павел, при использовании метода.Браузер Animate () jQuery IE7 не распознает свойство «позиция».например
Правило 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()
В моем случае это решилось таким образом.
Другие советы
Я столкнулся с аналогичной проблемой с функцией анимации и был удивлен, когда она показала ошибку, исходящую из основной библиотеки jQuery.Однако с jQuery все в порядке, вам нужно учитывать его IE.
При анимации любого атрибута элемента в IE вам необходимо убедиться, что в вашем CSS есть отправная точка для атрибута, который вы собираетесь изменить.Это касается и Сафари.
Например, постоянно перемещая 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 в конечном итоге выдаст ошибку.
Надеюсь это поможет
После дня размышлений, ПОЧЕМУ 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
ура старые версии!
Вы можете использовать селектор jQuery :visible вместо переключения класса isVisible.
Кроме того, ваша анимация функционально аналогична слайдуUp(1000).
Недавно у меня возникла проблема, когда animate() не работал должным образом, и это было связано с тем, что IE отображал мое CSS-заполнение:свойства отличаются от FireFox.
Похоже, это случалось с другими людьми, и мне пришлось поковыряться в своем CSS;вместо этого используйте поля, фиксированную ширину и другие ужасные хаки IE.
Возможно, это не по теме, но я играюсь с JQuery, и он великолепен, но, будучи новичком в Javascript, я не осознавал, что IE 7 и IE 8 не распознают ключевое слово const.Это то, что мешало моему JQuery работать, а не проблема с анимацией... надеюсь, это может помочь какой-нибудь отчаявшейся душе.чувак, мне не терпится вернуться к старым добрым AS3 и Flex..
видетьhttp://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/JSConstKeyword.html
для большего
Измените продолжительность для IE.Сделайте это на 1/10 меньше, чем в FF, и в обоих браузерах поведение должно быть примерно одинаковым:
ФФ
$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 200});
ИЕ
$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 20});
Должно это исправить.
Я не уверен, в чем конкретно проблема...возможно, вы не можете анимировать "display: none"?Попробуй это:
toHide.animate({ height : 0 }, 1000, function() { $(this).hide(); });
...думаю, похоже, что могут быть и другие проблемы с контейнером, у которого нет overflow: hidden установите на него.
Лучшим способом может быть отказ от изобретения велосипеда:плагин jQuery UI имеет встроенный аккордеон. http://docs.jquery.com/UI/Accordion Я уверен, что уважаемый г-н Resig & Co уже разобрался со всеми ошибками, с которыми вы могли столкнуться.
