くるくる回るGIFアニメを用意して、submitボタンをクリックした時にくるくる回したい

はぁ～丸二日くらい悩んだかも。
不毛だな。
ま、とにかく html をこんな感じにしておく。

<input id="next_button" type="submit" value="つぎへ" />
<span id="loading" style="display:none;"><img src="img/loader.gif" /> 処理中</span>

submitボタンの後ろにGIFアニメ画像を置いておいて、隠しておいて、クリックされたら出してやろう、というねらいだ。

で、最初俺はこう書いていた

$('input#next_button').click(function(e) {
  e.preventDefault();
  $('#next_button').hide(); 
  $('#loading').show();
  $('form').submit();
});

クリックで、
サブミットボタンのデフォルトの動作を禁止して、
サブミットボタンを消し、
ローディング画像を出し、
そしてフォームをサブミット！

これはまあ、動くんだが、IEで見ると何故かGIFアニメのアニメーションが動かない。静止してるのだ。
ということで順番を入れ替えてみた。

$('input#next_button').click(function(e) {
  e.preventDefault();
  $('form').submit();
  $('#next_button').hide(); 
  $('#loading').show();
});

先にサブミット。
これだと動く。
謎。
とにかく、submit() が先だ、先！