JQuery анимации зависают в ie8

Question

У меня есть анимация JQueryUI в сочетании с кодом Jquery, который добавляет HTML на страницу.HTML генерируется на основе данных из вызова JQuery Ajax.

Я думал, что замораживание моей анимации может быть из вызова Ajax, но из того, что говорит вопрос ниже, я не думаю:

Почему мой вращающийся GIF останавливается во время выполнения вызова jQuery ajax?

Я думаю, что проблема, с которой я столкнулся, может иметь то же происхождение, однако приведенный выше вопрос предоставляет ПРИЧИНУповедение, а не РЕШЕНИЕ.

У кого-нибудь есть решение?

Answer 1

Так что я думаю, что есть 3 основных «решения» этой проблемы;ну, это больше обходных путей.

1. Вы можете удалить анимацию скрытия.Используйте просто .hide () и затем используйте анимацию в шоу.
2. Вы можете использовать метод обратного вызова скрывающей анимации, чтобы затем вставить HTML и показать новый div
3. Вы можете использоватьдругой браузер.Я тестировал только на ie8 / firefox / chrome;но я бы в этом случае предложил хром, так как его способность делать это красиво удивительна.Хотя обычно я бы также предложил Firefox, однако в этом случае его ситуация не лучше, чем у ie8.

И, конечно, я думаю, что существует четвертое решение, которое заключается в том, чтобы просто разобраться с ним..

Answer 2

Эта статья может быть вам полезна.

Ключевая часть элементов HTML выглядит следующим образом:

<span id='myHiddenDiv' style='display: none'>
  <img src='' id='myAnimatedImage' align='absmiddle'>
</span>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" OnClientClick="showDiv();" Text="Search" />

У нас есть скрытый диапазон (это может быть div, если вы хотите его на новой строке), и внутри этого диапазона находится наш тег img. Далее, в обработчике OnClientClick нашей кнопки мы вызываем "showDiv ();" Функция клиентского скрипта, которая выглядит так:

<script language='javascript'> 
  function showDiv() 
  {
    document.getElementById('myHiddenDiv').style.display =""; 
    setTimeout('document.images["myAnimatedImage"].src="work.gif"', 200); 
  } 
</script>

При этом используется метод setTimeout, чтобы DOM сбрасывал свойство src изображения через 200 мс. В результате, когда вы нажимаете кнопку, запускающую длительный метод, изображение будет отображаться и продолжать анимацию до тех пор, пока не будет возвращена обратная передача и страница не будет перезагружена, после чего изображение исчезнет - именно то поведение, которое мы хотим.