我如何应用这些步骤 [英] How Do I Apply These Steps
本文介绍了我如何应用这些步骤的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在编码中我在哪里更改这些步骤？
将仪表板的背景颜色更改为黑色，不透明度为0.6。
更改不透明度仪表板滑出前，仪表板中的图像为0.5。
每个图像被鼠标移动时，将仪表板图像的不透明度更改为1.0。
< ！DOCTYPE html >
< html >
< head > ;
< meta charset = UTF-8 >
< title > 幻灯片信息中心< / title >
< link href = ../_ css / site.css rel = 样式表 >
< style >
#dashboard {
宽度：70px;
不透明度：0.6;
background-color：rgb（110,138,195）;
填充：20px 20px 0 20px;
仓位：绝对;
左：-92px;
z-index：100;
}
#dashboard img {
margin-bottom：20px;
订单：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 > < /脚本 >
< < span class =code-leadattribute> script >
$（凭证）.ready（function（）
{
$（'＃dashboard'）。悬停（
function（）{
$（this）.stop（）。animate（{opacity：1.0}，800）;
{
left：'0'，
backgroundColor：'rgb（255,255,255）'
}
500，
'easeInSine'
）; //结束动画
}，
function（）{
$（this）.stop（）。animate（{opacity：0.3}，800;
{
left：' - 92px'
backgroundColor：'rgb（110,138,195）'
}，
1500，
'easeOutBounce'
） ; //结束动画
}
）; //结尾悬停
}）; //结束就绪
< / script >
< / head >
< 正文 >
< div class = 包装 >
< div class = 标题 >
< p 类 = logo > JavaScript < i > & < / i > jQuery < i class = mm > < br > 缺少< br > 手动< / i > < / p >
< / div >
< div id = 信息中心 >
< img src = ../_ images / small / blue_h.jpg < span class =c ode-attribute> width = 70 height = 70 alt = blue >
< img src = ../_ images / small / green_h.jpg < span class =code-attribute> width = 70 height = 70\" alt = green >
< img src = ../_ images / small / orange_h.jpg < span class =code-attribute> width = 70 height = 70 alt = orange >
< img src = ../_ images / small / purple_h.jpg width = 70 height = 70 alt = 紫色 >
< img src = ../_ images / small / red_h.jpg width = 70 height = < span class =code-keyword> 70 alt = red >
< img src = ../_ images / small / yellow_h.jpg width = 70 height =< /跨度> <温泉n class =code-keyword> 70 alt = 黄色 >
< / div >
< div class = content >
< div class = main >
< H1 > 在幻灯片中滑动< / h1 >
< p > 鼠标悬停在此页面左边的蓝色条纹< / p >
< < span class =code-leadattribute> / div >
< / div >
< div class = 页脚 >
< p > JavaScript & amp; jQuery：The Missing Manual，< a href = http://sawmac.com/ > David McFarland < / a > 。由< a href = http://oreilly.com/ > O'Reilly Media，Inc < / a > 。< / p >
< / div >
< / div >
< / body >
< / html >
解决方案
< blockquote>（document）.ready（function（）
{
（'＃dashboard'）。hover（
function（）{
（this）.stop（）。animate（{opacity：1.0}，800）;
{
left：'0'，
backgroundColor：'rgb（255,255,255）'
}
500，
'easeInSine'
）; //结束动画
}，
function（）{
where do I change these steps at in the coding ?
Change the background color of the dashboard to black with an opacity of 0.6.
Change the opacity of the images in the dashboard to 0.5 before the dashboard slides out.
Change the opacity of the dashboard images to 1.0 when each image is moused over.
<!DOCTYPE html>
<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 & 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> 解决方案
(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() {
这篇关于我如何应用这些步骤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
