Javascript 加载页面时的CSS动画

我正在使用AJAX在我的站点上加载页面

当一个页面正在加载时，我希望徽标旋转以表示它正在加载

当页面加载时，用于控制css的jQuery（不确定它是否是javascript，我对java/jQuery不太熟悉）是

function loadPage(url)
{
url=url.replace('#page','');

$('#logo').css('display','none;');

$.ajax({
    type: "POST",
    url: "load_page.php",
    data: 'page='+url,
    dataType: "html",
    success: function(msg){

        if(parseInt(msg)!=0)
        {
            $('#pageContent').html(msg);
            $('#logo').css('visibility','visible');
        }
    }

控制动画的CSS是

    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }



    @-moz-keyframes spin {
        from {
            -moz-transform: rotate(0deg);
        }
        to {
            -moz-transform: rotate(360deg);
        }
    }

    @-ms-keyframes spin {
        from {
            -ms-transform: rotate(0deg);
        }
        to {
            -ms-transform: rotate(360deg);
        }
    }

    #logoholder { 

    }

    #logo   { 
        background: url(images/logo.png) 0 0 no-repeat; 

        width: 130px; 
        height: 130px; 
        -webkit-animation-name: spin; 
        -webkit-animation-duration: 1000ms; /* 40 seconds */
        -webkit-animation-iteration-count: infinite; 
        -webkit-animation-timing-function: linear;

        -moz-animation-name: spin; 
        -moz-animation-duration: 1000ms; /* 40 seconds */
        -moz-animation-iteration-count: infinite; 
        -moz-animation-timing-function: linear;

        -ms-animation-name: spin; 
        -ms-animation-duration: 1000ms; /* 40 seconds */
        -ms-animation-iteration-count: infinite; 
        -ms-animation-timing-function: linear;

        /* boooo opera */
        -o-transition: rotate(3600deg); /* works */
    }

是否有一个属性可以添加到CSS中（通过jquery），以便在页面未加载时徽标不会旋转。。。目前，标志不断旋转

也许我可以从“#logo”选择器中删除一个属性，它将使旋转无效

然后，我可以在页面加载时（通过javascript）添加某个属性，以使旋转正常工作

---

谢谢

不要将CSS动画绑定到

#logo

，而是将其绑定到一个类，例如

.spin

。当Ajax启动时，使用

addClass

将

spin

类添加到

#logo

：

$("#logo").addClass("spin");

$("#logo").removeClass("spin");

ajax内容加载完成后，使用

removeClass

：

$("#logo").addClass("spin");

$("#logo").removeClass("spin");

通过这种方式，您可以轻松地正常显示徽标，并使其仅在ajax为acitve时旋转。

在页面中使用类似于

的内容

然后在页面底部，有

$（'body'）.removeClass（'loading'）

然后使用
body.loading#logo
选择器瞄准css动画

页面完全加载后，jquery将删除.loading类，动画停止

同样在
$.ajax
中，您应该在
发送之前添加
.loading
类，并在
完成
事件中删除该类。
这看起来像是您最初隐藏徽标，然后在内容加载后显示（如注释中所述）。另外，您正在使用
显示
属性来隐藏它，使用
可见性
属性来隐藏它。这些不一样。我切换了下面的功能，并对这两个功能都使用了
显示
属性。不确定是否还有其他错误，但尝试一下，它会让您走上正确的方向

function loadPage(url)
    {
    url=url.replace('#page','');

    $('#logo').css('display','block');

    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){

            if(parseInt(msg)!=0)
              {  
               $('#pageContent').html(msg);
               $('#logo').css('display', 'none');
            }
        }

在加载之前隐藏徽标，然后显示徽标为什么加载完Java！=JavaScript；jQuery==JavaScript（实际上是一个用JavaScript:构建的库），那么我应该如何编辑原始代码来实现这一点…@Roy我在手机上，需要浏览页面来双重检查$.ajax的详细信息，因此我提交了一个不完整的答案，然后回来完成它。