Reputation: 13
I have problem with jquery animation. It's not working in IE9 and older. I think problem is somewhere with css because as I can see in a ie there is opacity set to 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();
<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>
#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;}
You can see the whole thing here
Does anybody know where the problem is?
Upvotes: 1
Views: 1555
Reputation: 5504
long story short: opacity won't work in ie and the only method to set an opacity in ie is, as far as i know, filter: alpha(opacity = X);
with 0 < X > 100 ....which won't work with an jquery animation
except, maybe this works:
$(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+")");
}
});
Upvotes: 1