Question

我在主页面上有一个动画gif，它会加载每当用户点击某些按钮时。 gif显示但在IE中没有动画效果。我已将hide类（ZURB）添加到div中，并根据此类显示和隐藏div（ addClass / removeClass Jquery）。

注意：如果我在Jquery中使用 hide（）和 show（）方法并删除zurb css类，那么gif会动画化我已添加的em>＆＃39; .hide＆＃39; 。

我想将div的可见性设置为隐藏在母版页中，然后仅在少数子页面中切换它。我怎样才能做到这一点？

CSS：

#loading{position:fixed;top:0px;right:0px;width:100%;height:100%;background-color:#666;background-image:url('ajax-loader.gif'); background-repeat:no-repeat;background-position:center;z-index:10000000;  opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */}

HTML母版页：

  <div id="loading" runat="server" class="hide"></div>

子页面中的Jquery：

 $("#<%=Master.FindControl("loading").ClientID %>").removeClass("hide");

hide of hide（Zurb）：

.hide {
  display: none !important;
}

Answer 1

你需要重新渲染img onclick。尝试类似的东西

function showProgress() {
        var pb = document.getElementById("progressBar");
        pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
        pb.style.display = '';
    }

and in your html:

<input type="button" value="button" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
    <img src="./progress-bar.gif" width="200" height ="40"/>
</div>

查看类似帖子here

Answer 2

这是已知的IE限制。你可以加载并设置display：none;然后，当用户单击某个按钮时，您可以设置可见性为true 两个有用的链接： Animated GIF in IE stopping而且 IE7/IE8 and frozen animated gifs

GIF动画不是动画

2 个答案: