2011-02-28 37 views
0

我在頁面頂部有一個div,裏面有一個按鈕,點擊時會顯示帶有選項的隱藏div。我想用jQuery淡入div來給它更多的視覺效果。但是,當我添加的JavaScript的一切消失!我也不知道爲什麼。我需要在場景助理中使用它嗎?我不這麼認爲......所有幫助表示感謝,謝謝!JQuery淡入功能會導致WebOS應用程序中的一切消失?

<body> 

<style type="text/css"> 
.header { 
color:#FFF; 
width:100%; 
margin-top:-60px; 
position:absolute; 
padding:15px; 
background:#6699CC; 
} 

.header:hover #hidden { 
display:none; 
} 

#hidden { 
display:none; 
} 

.post { 
background:#6699CC; 
} 

.post:hover #hidden { 
display:block; 
} 

#pill { 
position:absolute; 
margin-left:65.5%; 
margin-top:-34px; 
} 

#pill:hover { 
opacity:0.4;filter:alpha(opacity=40) 
} 

h1 { 
font-size:20px; 
font-weight:normal; 
} 

.textPost, .photoPost, .quotePost, .linkPost, .chatPost, .audioPost { 
width:80px; 
height:90px; 
padding:20px; 
padding-top:10px; 
text-align:center; 
} 

.textPost, .quotePost, .chatPost { 
float:left; 
} 

.photoPost, .linkPost, .audioPost { 
float:right; 
margin-right:40px; 
} 

#bubble, #photograph, #quote, #link, #chat, #audio { 
margin-top:10px; 
margin-bottom:-20px; 
} 

.space { 
background:#6699CC; 
width:100%; 
height:50px; 
position:absolute; 
margin-top:365px; 
margin-left:-15px; 
} 
</style> 

<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> 
<style type="text/javascript" />    
$(function(){ 
$('#pill').click(function(){ 
$('#hidden').fadeIn() 
}); 
}); 
</script> 
</head> 

<div id="main" class="palm-hasheader"></div> 
<div class="header">Dashboard<div class="post"><img id="pill" 
src="http://27.media.tumblr.com/tumblr_lhbg3u8WLe1qajshqo1_100.png"> 
<div id="hidden"> 
<div class="textPost"> 
<img id="bubble" src="http://28.media.tumblr.com/tumblr_lhb72wBhjy1qajshqo1_100.png"> 
<h1>Text</h1> 
</div> 

<div class="photoPost"> 
<img id="photograph" 
src="http://27.media.tumblr.com/tumblr_lhb7mjyYbm1qajshqo1_100.png"> 
<h1>Photo</h1> 
</div> 

<div class="quotePost"> 
<img id="quote" 
src="http://30.media.tumblr.com/tumblr_lhb91dxhML1qajshqo1_100.png"> 
<h1>Quote</h1> 
</div> 

<div class="linkPost"> 
<img id="link" src="http://30.media.tumblr.com/tumblr_lhb9od3cPU1qajshqo1_100.png"> 
<h1>Link</h1> 
</div> 

<div class="chatPost"> 
<img id="chat" src="http://29.media.tumblr.com/tumblr_lhb9ziYQRJ1qajshqo1_100.png"> 
<h1>Chat</h1> 
</div> 

<div class="audioPost"> 
<img id="audio"  
src="http://30.media.tumblr.com/tumblr_lhbbrcUSmP1qajshqo1_100.png"> 
<h1>Audio</h1> 
</div> 
<div class="space"></div> 
</div> 
</div> 
</div> 
</body> 
+0

你有你的頭部_inside_身體?這是無效的。將''標籤移動到關閉標籤''後面以:)開頭。還有,你錯過了一個分號:'$('#hidden')。fadeIn();'。 – Kyle 2011-02-28 07:54:20

+0

謝謝,但它仍然不顯示任何東西。 – 2011-03-01 03:09:21

回答

1

<style type="text/javascript" />我認爲是不正確的嘗試:

<script type="text/javascript">代替。

工作在我的前。

祝你好運!

相關問題