jQuery Animate 或 Load 函数在 IE11 中不起作用答案

【问题标题】：jQuery Animate or Load function not working in IE11jQuery Animate 或 Load 函数在 IE11 中不起作用
【发布时间】：2014-11-20 16:29:07
【问题描述】：

$(document).ready(function () {
    $("img#ucar").load(function () {
        $(this)
            .animate({ opacity: 1 / 2 }, 600)
            .animate({ top: "616px" }, 300)
            .animate({ opacity: 1 }, 0);
        return false;
    });
});

.ism {
    top: -400px;
    width: 225px;
    height: 345px;
    margin: 0;
    padding: 0;
    position:absolute;
}

#ucar {
    position: relative;
}

<div class="ism">
    <img id="ucar" src="images/img01.png" />
</div>

此代码在 chrome 上工作，但在 IE 11 上不工作。我查看了其他问题，仅回答了我在网站上找不到的答案。

【问题讨论】：

标签： html animation load jquery-animate internet-explorer-11

【解决方案1】：

这主要发生在脚本有时间执行之前被加载的缓存图像（由于缓存）。

添加检查图像是否已经加载并触发脚本..

$(document).ready(function () {
    $("img#ucar").load(function () {
        $(this)
            .animate({ opacity: 1 / 2 }, 600)
            .animate({ top: "616px" }, 300)
            .animate({ opacity: 1 }, 0);
        return false;
    }).each(function(){
        if (this.complete){
            $(this).trigger('load');
        }
    });
});

http://jsfiddle.net/gaby/k7vz0dgv/的演示

【讨论】：

【解决方案2】：

似乎.load()函数由于某种原因没有在IE中触发。
您可以通过告诉图像加载一个空字符串""来手动触发事件，因此一旦完成，回调函数将执行：

$(document).ready(function () {
    // have a look at the load function
    $("img#ucar").load("",function () {
        $(this).animate({
            opacity: 1 / 2            
        }, 600).animate({
            top: "616px"
        }, 300).animate({
            opacity: 1
        }, 0);
        return false;
    });
});

Fiddle Example

【讨论】：