Question

我有2个使用内联样式的加载图标，我在登录后使用第一个图标作为加载网页图标，当我点击按钮发布时第二个加载图标将显示加载图标，之后它将显示评论。我设置它们显示为没有样式，然后使用jquery我通过调用id显示它们但我不知道如何在apache服务器中的localhost中看到它们以及如何在线设置它们的默认值？如果我点击发布按钮，它还将加载整个网页的消息示例HELLO WORLD，HI WORLD，这就是为什么我看不到加载图标

css

// in my class...
Card cards[20];

Card *cardsPointer = cards;// Pointer contains the address of the
//1st element of 'cards' array.

// in method...
for(int i = 0; i < 20; i++)
*(cardsPointer++) = Card(i, /*i as char +*/ "_Card.bmp");// Note that 
// there is no 'new' operator as 'cardsPointer' has type 'Card *' and 
// not 'Card **'. And 'cardsPointer' has type 'Card *' as the array is
// of type 'Card'.

HTML

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;

}

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

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

jquery的

  <!DOCTYPE html>
  <html>
    <head>

    </head>
    <body>

      <div id="loadingwindow" class="loader" style="display: none;"> 
       </div>

      <div id="container">

      <form  id="formsubmitcomment">
            <input type="hidden" id="user_id" name="user_id" value="<?php 
                 echo $user_id?>">
            <textarea name="post" id="post" style="resize: none"></textarea>

              <input type="submit" id="submit" name="submit" value="Post">
       </form>


      <div id="commentload" class="loader" style="display: none;">

         </div>
      <div id="postcomment">

          </div>

     </body>
</html>

php showpostcomment.php

$(window).ready(function(){
   $("#loadingwindow").ajaxStart(function(){
            $(this).css("display", "block");
            $(this).fadeIn("slow");
            });

  $("#loadingwindow").ajaxComplete(function(){
            $(this).css("display", "none");
            $(this).fadeOut("slow");
            });
 });


$(document).ready(function() {
     $("#submit").click(function (){
         $.post("postcomment.php", $("#formsubmitcomment").serialize(), 
          function(){
              $("#commentload").css("display: block");
                               });         
                               });

    $("#postcomment").load("showpostcomment.php", function(){

                                 }); 
  });

2加载图标旋转jquery

0 个答案: