jquery - 如何使用 jQuery 打开和关闭背景可见性？

Question

我有以下CSS：

#load-icon
{
    background: url(/Images/loaders/mask-loader.gif);
    background-repeat: no-repeat;
    z-index: 99; width: 32px; height: 32px;
    z-index: 99; 
    margin-top: 9px;
    margin-bottom: 9px;
    margin-right: 5px; 
    display: none;
}

我正在使用以下代码使其可见和不可见：

$(document).ajaxStart(function () {
    $('#load-icon').show(500);
});
$(document).ajaxStop(function () {
    $('#load-icon').hide();
});

然而，背景用于间距，当它被隐藏时，#load-icon 不使用空间，这不是我想要的。

我怎样才能使#load-icon 始终使用 32px 的空间并且 gif 变得可见或不可见？如果它更容易，我不太关心淡入或淡出持续时间。

这是一个小提琴，它显示了它的使用位置：fiddle

更新：我真的需要一种不涉及将背景图像设置为无然后返回 gif 的方法。那是因为我很可能使用不同的 CSS 样式并且我无法将 gif 名称编码到我的 javascript 中。

Answer 1

你应该在jquery背景中设置无..即

$(document).ready(function(e) {
    var loadicon = $('#load-icon').css('background');
    $('#load-icon').css('background','none');

    $(document).ajaxStart(function () {
        $('#load-icon').css('background',loadicon);
    });
    $(document).ajaxStop(function () {
        $('#load-icon').css('background','none');
    });
});

Answer 2

$(document).ajaxStart(function () {
    $('#load-icon').fadeTo(0,0.0);
});
$(document).ajaxStop(function () {
    $('#load-icon').fadeTo(0,1.0);
});