簡體   English   中英

jQuery animate在IE9及更高版本中不起作用

[英]jquery animate doesn't work in IE9 and older

jQuery動畫有問題。 在IE9及更高版本中不起作用。 我認為問題出在CSS的某個地方,因為正如我在ie中所看到的,不透明度設置為0。

使用Javascript

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 <X> 100 ....不適用於jQuery動畫

除了,也許這可行:

$(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+")");
    }
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM