jQuery Animate or Load function not working in IE11 - html

Question

$(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>
This code is working chrome but not working IE 11. I looked at other questions only answer I could not find on the site.

Answer 1

This happens mainly to cached images that get loaded (due to the caching) before the script has time to execute.
Add a check to see if the image is already loaded and trigger the script..
$(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');
}
});
});
Demo at http://jsfiddle.net/gaby/k7vz0dgv/

Answer 2

It seems that the .load() function is not triggered in IE for some reason.
You could manually trigger the event by telling the image to load an empty string "" so once its done, the callback function will execute:
$(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