jquery Animate 在 IE9 及更早版本中不起作用
jquery animate doesn't work in IE9 and older
我对jquery动画有问题。它在IE9及更早版本中不起作用。我认为问题出在 css 的某个地方,因为正如我在 ie 中看到的那样,不透明度设置为 0。
爪哇语
var $lead = $('.lead');
var height = $lead.height();
var totalHeight = height * numOfLeads;
function bounce() {
var time = 400;
var counter1 = 1;
$($(".lead").get().reverse()).each(function() {
setTimeout(function(el, counter1, height, totalHeight) {
$(el).css({
top: "-" + (totalHeight - (counter1 * height) + height) + "px",
opacity: 0,
display: "block",
position: "relative"
}).animate({
top: "+=" + (totalHeight - (counter1 * height) + height) + "px",
opacity: 1
}, 1000, "easeOutBounce")
;
}, time, this, counter1, height, totalHeight);
time += 400;
counter1 += 1;
});
}
bounce();
.HTML
<div class="lead">
<div class="progress-bar">
<div>
<span class="first green end"></span>
<span class="middle"></span>
<span class="middle"></span>
<span class="last"></span>
</div>
<span>Accepted</span>
</div>
<div class="product">Hypotek</div>
<div class="county">Ustecky</div>
<div class="change">
<span>Changed</span>
<div>22</div>
<div>29</div>
<div>38</div>
</div>
.CSS
#leads{position: absolute;}
#leads, #leads div { z-index: 5;}
.lead { background: url("../images/lead_back_stripe.png") repeat-x scroll 0 0 transparent; height: 65px;}
.lead > div { float: left; padding-left: 20px; padding-top: 21px; width: 180px;}
.lead > div.progress-bar{width: 185px;}
.lead > div.product {width: 175px;}
你可以在这里看到整个事情
有人知道问题出在哪里吗?
长话短说:不透明度在IE中不起作用,据我所知,在IE中设置不透明度的唯一方法是filter: alpha(opacity = X);
0
除了,也许这有效:
$(el).animate({
opacity:1
},{
step: function( now, fx ) {
var X = 100 * now; //like at half the animation, opacity is 0.5, so X becomes 50
$(fx.elem).css("filter","alpha(opacity="+X+")");
}
});
相关文章:
- 一页签出在Magento版本1.7.0.2中不起作用
- pixijs 鼠标关闭事件不起作用(任何版本)
- 为什么我的谷歌浏览器扩展程序在谷歌浏览器版本 41.0.2272.89 中不起作用
- Phonegap (Android) - 数据库更改版本不起作用
- jquery.min.js版本冲突在asp.net网站中不起作用
- Kineticjs:drag.moving 事件在最新版本上不起作用.如何升级代码
- Jssor 全长滑块在 opera 9.64 版本中不起作用
- Chrome 消息:chrome.runtime.sendMessage 在最新版本 49 上不起作用
- jQuery 引导选项卡在自定义模式中不起作用(不是引导模式,而是我自己的版本)
- Javascript 函数在 IE(仅限)版本 9 - 10 上不起作用
- 画布元素在 IE 8 及更低版本中不起作用
- html下拉菜单在Firefox中不起作用,并且在旧版本的IE中一切都是错误的
- 砌体在移动浏览器(chrome)上不起作用,并且仅在Chrome桌面版本上有效,如果我重新加载(ctrl + f5)页面
- Meteor 1.2.1 版本 服务器代码中的 Meteor.method({}) 不起作用
- Jquery 切换/单击在早于 9 的 Safari 版本中不起作用
- 尽管使用了最新的 angularJS 版本,但 ng-repeat-start 不起作用的任何原因
- jquery Animate 在 IE9 及更早版本中不起作用
- 上传 - HTML5 版本 文件扩展名不起作用
- 动态版本中的类不起作用
- nvm node.js使用的版本不起作用