Question

在编码中我在哪里更改这些步骤？将仪表板的背景颜色更改为黑色，不透明度为0.6。在仪表板滑出之前，将仪表板中图像的不透明度更改为0.5。每个图像被鼠标悬停时，将仪表板图像的不透明度更改为1.0。

<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>

Answer 1

这个怎么样 - FIDDLE。

JS

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

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

编码CSS问题

1 个答案: