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 background中设置none ..即

$(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);
});

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

2 个答案: