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を介して)特定のプロパティを追加して、スピンを機能させることができますか?
ありがとう