2012-02-23 83 views
0

我有一個800x500的圖像。底部的兩個象限有編輯,我想淡入圖形。jquery淡入,圖像在圖像

如果整幅圖像組成的 AB CD

Ç& d是10秒後究竟會被覆蓋了兩張圖片是適合底部象限。我開始顯示:無;認爲fadein()會照顧到這一點,但我已經搞砸了。

小提琴是here我用不同的圖像,但大小是正確的。

的style.css

*{ 
    margin:0; 
    padding:0; 
    background-color: #000; 
} 

#container { 
    position: absolute; 
    bottom: 0px; 
    top: 0px; 
    display:inline;    
} 

.bottom-left { 
    position:absolute; 
    top:250px; 
    left: 0px; 
    display: none; 
} 

.bottom-right { 
    position:absolute; 
    top:250px; 
    left:400px; 
    display: inline; 

} 

頁:

<!DOCTYPE html> 
<html> 
<head> 

<!-- STYLE SHEETS --> 
     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> 

<!-- JQuery * QTip Plugin at the bottom --> 
     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 


<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#bottom-left').fadeIn(10000); 
    }); 
</script> 

</head> 
<body> 
<div id="container"> 

<image src="images/NoAlertFull.png"> 
     <span class="bottom-right"> 
       <image src="images/Alert-red.png"> 
     </span> 
     <span class="bottom-left"> 
       <image src="images/Alert-yellow.png"> 
     </span>  
</div> 

</body> 
</html> 

回答

1

你adressing通過ID的跨度,而不是通過類:改變選擇到

$('.bottom-left').fadeIn('slow'); 
1

自下而上左邊是你的班級名稱。所以以點

$('.bottom-left').fadeIn(1000); 

這裏使用它是在樣品:http://jsfiddle.net/CwgyW/5/

http://api.jquery.com/class-selector/

如果您嘗試使用id來獲取元素,使用#

Ex : $("#myDivId").fadeIn(3000); 

如果您嘗試使用類名獲得元素,使用點

Ex : $(".myCSSClassName").fadeIn(3000); 
1

您使用id選擇器#bottom-left而不是類別選擇器.bottom-left

此外,jsfiddle擁有自己的文檔大綱,不會粘貼整個頁面,只是正文內容。

演示:http://jsfiddle.net/Guffa/CwgyW/6/

1
$('#bottom-left').fadeIn(10000); 

應該是

$('.bottom-left').fadeIn(10000); 

#是用於通過選擇ID

.是用於通過

類選擇