jQuery, HTML 5 и IE дают неправильную анимацию

#jquery #html #animation

#jquery #HTML #Анимация

Вопрос:

У меня проблема с анимацией jQuery в IE (я тестирую ее в IE 8). Сайт написан на HTML5, и у меня есть тег figure с тегом img внутри.

По щелчку я хочу переместить весь элемент figure, поэтому в функции animate я просто указываю новую левую позицию. В FF, Opera и Chrome это работает хорошо, в IE проблема.

Похоже, IE перерисовывает HTML один раз на 200 мс. Если у меня есть анимация с «медленным», есть 3 перехода от начальной позиции до конца, с «быстрым» есть только один переход…

Пожалуйста, помогите мне.

Вот простой код, который я использую:

Это функция, которая создает рисунок:

var createElement = function (w, h, left, id, photo, caption, HTMLclass) {

var nid = Math.round(Math.random()*100)*1000 (id*1);

var figure = $("<figure>").css({"z-index":1,"width":w "px","height":h "px","left":left "px","cursor":"pointer"}).attr("id",(nid 1)).attr("onclick","moveElements(this)").addClass(HTMLclass);

var img = $("<img>").attr("src","photo/co/" photo).attr("alt", caption).css({"z-index":2,"width":w "px","height":h "px"});

var figcaption = $("<figcaption>").text(caption);
$("body").append(figure.append(img).append(figcaption));

};

И вот цикл с анимацией:

var figures = $("figure").each(function(index) {
$(this).animate({"left": newLeft}, "slow");
};

Комментарии:

1. Код? И правильно ли IE8 поддерживает HTML5?

Ответ №1:

Возможно, это связано с тем, что Internet Explorer не знает, что делать с новыми тегами HTML 5. Попробуйте вставить следующий Javascript в свою голову. Что делает javascript, так это создает элементы для статьи, нижнего колонтитула, заголовка и т. Д. Поэтому В старых браузерах есть эти элементы для работы с загрузкой DOM.

 document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");
document.createElement("feature"); 
 

Если это не сработает, попробуйте опубликовать свой код здесь, чтобы мы могли посмотреть более внимательно. Проблема с перекрестным браузером, похоже, указывает на то, что IE не знает, как обрабатывать эти элементы.

Комментарии:

1. Я использую jquery для создания и анимации элементов (он создает все хорошо, img не нужно закрывать в HTML5) и html5shim.googlecode.com/svn/trunk/html5.js чтобы заставить IE корректно отображать все теги. Это работает довольно хорошо. Только одна вещь, которая не работает должным образом, — это анимация…