Question

使用我的jquery，我试图通过动画消息的不透明度来实现从消息到加载函数的轻松过渡，插入loading.gif并重新设置不透明度的动画。它失败了。 / p>

$('#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（）调用时，它工作正常（除了当然图像不在那里;所以我认为这是因为html没有插入不透明度：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

不要给图片样式=“不透明度：0;” - 当它的父项被隐藏时它不可见，而且，正如你已经发现的那样，一旦父级已经淡入，它将保持0不透明度。

您也可以使用jQuery的fadeIn和FadeOut函数，而不是手动设置动画。

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

3 个答案: