0

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 */
    }

ページが読み込まれていないときにロゴが回転しないように（jqueryを介して）CSSに追加できるプロパティはありますか...現時点では、ロゴは常に回転しています

たぶん、スピンを無効にする「#logo」セレクターから削除できるプロパティがあります

次に、ページの読み込み中に（javascriptを介して）特定のプロパティを追加して、スピンを機能させることができますか？

ありがとう

4

3 に答える 3

1

CSS アニメーションを にバインドする代わりに#logo、クラスにバインドし.spinます。Ajax の起動時に、以下を使用して にspinクラスを追加します。#logoaddClass

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

ajax コンテンツの読み込みが完了したら、次を使用しますremoveClass。

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

このようにして、ロゴを通常どおり簡単に表示し、ajax がアクティブな場合にのみロゴを回転させることができます。

于 2013-01-27T20:00:18.397 に答える
0

あなたのページのようなものを使用<body class="loading">してください。

次に、ページの下部に、$('body').removeClass('loading');

次に、CSS アニメーションをbody.loading #logoセレクターでターゲットにします。

ページが完全に読み込まれると、jquery は .loading クラスを削除し、アニメーションが停止します。

また、イベントでクラスを$.ajax追加し、.loadingクラスをbeforeSend削除する必要がありますcomplete。

于 2013-01-27T20:01:13.360 に答える
0

最初はロゴを非表示にして、コンテンツの読み込み後に表示しているようです (コメントで述べたように)。また、displayプロパティを使用して非表示にし、プロパティを使用して非visibility表示にしています。それらは同じではありません。以下の機能を切り替えて、display両方にプロパティを使用します。他のエラーがあるかどうかはわかりませんが、これを試してみてください。正しい方向に進むはずです。

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');
            }
        }
于 2013-01-27T20:18:28.027 に答える