jquery - 动画不透明度，插入html，动画不透明度

Question

使用我的 jquery，我试图通过将消息的不透明度设置为动画，插入 loading.gif 并将不透明度重新设置为动画，使从消息到加载功能的转换变得容易。它失败了。

$('#powerSearchSubmitButton').click(function(ev) {
    startLoad();
    return false;
});
function startLoad() {
    $('.message').each(function(i) {
        $(this).animate({opacity: 0}, 500, function() {
            $(this).html("<img src=\"/content/pics/loadingBig.gif\" alt=\"loading\" style=\"opacity:0\"/>");
            $(this).animate({opacity: 1},500);
        });
    };
    return true;
};

当我离开.html()电话时，它工作正常（当然图像不存在除外；所以我认为这是因为没有插入 htmlopacity:0;但是当我插入它时style="opacity:0"它不能淡入...

我究竟做错了什么？

Answer 1

尝试这个：

$(this).fadeOut(500, function() {
     $(this).html("<img src='content/pics/loadingBig.gif' alt='loading'/>");
    });
$(this).fadeIn(500);

Answer 2

改为将动画应用到容器，或使用 .css() 方法设置不透明度（内联样式可能会干扰 jQuery 为相应属性设置动画的能力）。

Answer 3

不要给图片 style="opacity:0;" - 它的父级隐藏时不可见，并且，正如您所发现的，一旦父级淡入，它将保持 0 不透明度。

您还可以使用 jQuery 的fadeIn和FadeOut函数来代替手动制作动画。