Question

我想在下面提到的spinner css的ajax进程中启动和停止，但不能。请指教。＆＃34; CSS＆＃34;当ajax在jsp文件中启动和停止时，代码不会运行。

CSS代码：

.cssload-container {
    width: 100%;
    height: 45px;
    text-align: center;
}

.cssload-zenith {
    width: 45px;
    height: 45px;
    margin: 0 auto;
    border-radius: 50%;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    box-shadow: 3px 3px 1px rgb(255,255,255);
    animation: cssload-spin 510ms infinite linear;
    -o-animation: cssload-spin 510ms infinite linear;
    -ms-animation: cssload-spin 510ms infinite linear;
    -webkit-animation: cssload-spin 510ms infinite linear;
    -moz-animation: cssload-spin 510ms infinite linear;
}



@keyframes cssload-spin {
    100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes cssload-spin {
    100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes cssload-spin {
    100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes cssload-spin {
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes cssload-spin {
    100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

HTML代码：

<div class="cssload-container">
    <div class="cssload-zenith"></div>
</div>

jquery代码：

$('.cssload-container').ajaxStart(function(){
    $(this).show();
});
$('.cssload-container').ajaxStart(function(){
    $(this).show().hide();
});

Answer 1

以下是如何纠正您的功能：

$( document ).ajaxStart(function() {
   $('.cssload-container').show();
}

$( document ).ajaxStop(function() {
   $('.cssload-container').hide();
}

原始示例：

在您的ajax中调用下面的startSpinner / stopSpinner函数

＆＃13;

function startSpinner() {
  $('.cssload-container').show();
}

function stopSpinner() {
  $('.cssload-container').hide();
}

＆＃13;

.cssload-container {
    width: 100%;
    height: 45px;
    text-align: center;
    display: none;
}

.cssload-zenith {
    width: 45px;
    height: 45px;
    margin: 0 auto;
    border-radius: 50%;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    box-shadow: 3px 3px 1px rgb(255,255,255);
    animation: cssload-spin 510ms infinite linear;
    -o-animation: cssload-spin 510ms infinite linear;
    -ms-animation: cssload-spin 510ms infinite linear;
    -webkit-animation: cssload-spin 510ms infinite linear;
    -moz-animation: cssload-spin 510ms infinite linear;
}



@keyframes cssload-spin {
    100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes cssload-spin {
    100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes cssload-spin {
    100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes cssload-spin {
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes cssload-spin {
    100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="startSpinner()">Start</button>
<button onclick="stopSpinner()">Stop</button>

<div class="cssload-container">
    <div class="cssload-zenith">TEXT</div>
</div>

＆＃13;

ajax spinner开始停止不要工作

1 个答案: