0

jquery-1.3.2.min.js を使用して Chrome にアニメーション画像が表示されない理由がわかりません。jquery-1.9.1.js を使用している場合、IE や Chrome では表示されません。HTML、css、jsを使用しています。Chrome/IE でキャッシュをクリアしましたが、違いはありません。また、このフォーラムで以下に示す提案を試みましたが、この問題では機能しませんでした。

<html>
<head>
<title>left.html</title>
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/animatea.js"></script>
</head>
<body>
<div id="mask">
<div><img id="logo" border="0" src="logo.jpg"></div>  
<div id="subtitle">subtitle</div></div>
</body>
</html>

#mask{  
position:relative;  
/*margin-left: 10px;*/  
width: 400px;  
height: 100px;  
border: 0px solid grey;  
}  
#logo{  
float: right;  /*Tried w/o but made no difference*/ 
margin-left: 100%;  /*Tried different values but makes no difference*/
position: absolute; /*Tried fixed/relative but made no difference*/ 
z-index: 1;  
display: none; /*Tried w/o but made no difference*/ 
}  
#subtitle{
float: right; /*Tried w/o but made no difference*/ 
font-size: 0px;
font-family: verdana;
margin-left: 100%;
position: absolute;
z-index:2; /*Tried different number but made no difference*/
}

$(function(){  
//$('#lat1').click(function(){  
var l = $('#logo').width();  
var t = $('#logo').height();  
var speed = 800;  
$('#logo').css({width:0,height:0,display:''});  
moveIt(t,l,s,speed,0);  
});  
function moveIt(a,b,c,d,e){
$('#logo').animate({height:a,width:b,marginLeft:e},d);
aa = a-5;
$('#subtitle').animate({marginTop:aa,marginLeft:e,'fontSize':c},d,function(){
//setTimeout(function(){getBack(a,b,d);a=null,b=null,c=null},500);
});
$('#lat1').hide();
}
4

1 に答える 1

0

img要素をid="logo"の代わりに に変更してみてくださいid="title"。CSS スタイルと JS の両方が要素を参照して#logoいますが、その ID を持つ要素がありません。

編集:moveIt()上記を投稿するまで、機能を追加するための更新が表示されませんでした。moveIt()関数が実際に使用していることがわかり#titleました。他のコードと一貫性を持たせる必要があります。(表示されていない要素もアニメーション化して#subtitleいますか?)

#logoまた、 asfloat:right と を使用する意味があるかどうかもわかりませposition:absoluteんfloat。

于 2013-02-09T22:28:16.477 に答える