javascript - Jquery .animate 忽略持续时间

Question

我正在尝试在加载远程图像后淡入该图像。它运行良好，但由于某种原因，动画的持续时间被忽略，并且不透明度可能在 10-15 秒内发生变化。

$(function(){
    var src = "myImageURL";
    var ele = $('.wrapper');
    ele.css('opacity', '0.0');
    var img = $('<img>', {
        src: src
    }).hide().appendTo(ele).on('load', function() {
        ele.css('background-image', 'url('+src+')').show();
        ele.animate({ opacity: '1.0' }, 500, 'linear', function(){
            // Other unrelated code
        };
    });
});

JSFIDDLE

Answer 1

在 jsfiddle 的 css 中，您设置了 15 个部分的过渡，这将覆盖您添加的基于 javascript 的动画:

这些是有问题的行，将其删除，它就会像您所描述的那样工作:

.wrapper {
  -webkit-transition: all 15s ease-in;
  -moz-transition: all 15s ease-in;
  -o-transition: all 15s ease-in;
  -ms-transition: all 15s ease-in;
  transition: all 15s ease-in;