編碼CSS問題

我在哪裏更改編碼中的這些步驟？將不透明度爲0.6的儀表板的背景顏色更改爲黑色。在儀表板滑出之前，將儀表板中圖像的不透明度更改爲0.5。當每個圖像被遮蓋時，將儀表板圖像的不透明度更改爲1.0。編碼CSS問題

<html> 

<head> 

<meta charset="UTF-8"> 
<title>A Slide In Dashboard</title> 

<link href="../_css/site.css" rel="stylesheet"> 

<style> 

#dashboard { 

width: 70px; 
opacity:0.6; 

background-color: rgb(110,138,195); 

padding: 20px 20px 0 20px; 

position: absolute; 

left: -92px; 
    z-index: 100; 
} 

#dashboard img { 

margin-bottom: 20px; 

order: 1px solid rgb(0,0,0); 
} 

</style> 

<script src="/_js/jquery-1.7.2.min.js"> 
</script> 

<script src="_js/jquery-1.6.3.min.js"></script> 




<script src="_js/jquery.easing.1.3.js"></script> 





<script src="_js/jquery.color.js"></script> 


<script> 

$(document).ready(function() 
{ 


$('#dashboard').hover(
function(){ 

$(this).stop().animate({ opacity:1.0}, 800); 
{ 
    left: '0' , 
    backgroundColor: 'rgb(255,255,255)' 




} 
    500, 
    'easeInSine' 
); // end animate 
}, 


function() { 
    $(this).stop().animate({ opacity:0.3 }, 800; 
    { 
     left: '-92px' 
     backgroundColor: 'rgb(110,138,195)' 
}, 
1500, 
'easeOutBounce' 
); // end animate 
    } 
); // end hover 
}); // end ready 

</script> 

</head> 

<body> 

<div class="wrapper"> 
<div class="header"> 

<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p> 
</div> 

<div id="dashboard"> 
<img src="../_images/small/blue_h.jpg" width="70" height="70" alt="blue"> 
<img src="../_images/small/green_h.jpg" width="70" height="70" alt="green"> 
<img src="../_images/small/orange_h.jpg" width="70" height="70" alt="orange"> 

<img src="../_images/small/purple_h.jpg" width="70" height="70" alt="purple"> 
<img src="../_images/small/red_h.jpg" width="70" height="70" alt="red"> 
<img src="../_images/small/yellow_h.jpg" width="70" height="70" alt="yellow"> 
</div> 

<div class="content"> 
<div class="main"> 
<h1>Slide in Dashboard</h1> 
<p>Mouse over the blue stripe on the left edge of this page</p> 
</div> 
</div> 
<div class="footer"> 
<p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p> 
</div> 
</div> 

</body> 

</html>

來源

2014-09-24 user3742556

添加的jsfiddle你的代碼，這可能幫助。 – Zentaurus 2014-09-24 02:44:21

這個怎麼樣 - FIDDLE。

$('.showme').on('click', function(){ 

$(".slider").animate({ 
         left: 0 
         }, 1000, 
         function() { 
            // Animation complete. 
            }); 
});

來源

2014-09-24 04:06:17 TimSPQR

回答

相關問題