Javascript 带标题的滑动框
我有一个滑动框标题，它工作得很好。但是，当你第一次查看它时，它上面有一个方框标题，然后当你将鼠标移到它上面时，它可以正常工作，但一开始它的标题就在上面。我希望框标题仅在用户将鼠标移到框上时显示。我不明白为什么会这样。这有点奇怪 看看这里，这样你就能明白我在说什么了 下面是我的源代码Javascript 带标题的滑动框,javascript,jquery,Javascript,Jquery,我有一个滑动框标题，它工作得很好。但是，当你第一次查看它时，它上面有一个方框标题，然后当你将鼠标移到它上面时，它可以正常工作，但一开始它的标题就在上面。我希望框标题仅在用户将鼠标移到框上时显示。我不明白为什么会这样。这有点奇怪 看看这里，这样你就能明白我在说什么了 下面是我的源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing</title>
<style type="text/css">
*{ padding:0px; margin:0px; }
body{ background:#D5DEE7; }
a{ color:#C8DCE5; }
h3{ margin: 190px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0px 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 260px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
</style>
<script type="text/javascript" src="http://www.microsoft.com/library/shared/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
});
//Header Text Comes in Later
$('.boxgrid.slidedown').hover(function(){
$(".delay", this).stop().animate({top:'0px'},{queue:false,duration:500});
}, function() {
$(".delay", this).stop().animate({top:'260px'},{queue:false,duration:500});
});
});
</script>
</head>
<body>
<div class="boxgrid slidedown">
<img src="jareck.jpg"/>
<div class="cover boxcaption">
<div class="delay boxcaption">
<h3>The Nonsense Society</h3>
</div>
</div>
</div>
</body>
</html>
测试
*{填充：0px；边距：0px；}
正文{背景：#D5DEE7；}
a{color:#C8DCE5；}
h3{页边空白：190px 10px 0 10px；颜色：#FFF；字体：18pt Arial，无衬线；字母间距：-1px；字体重量：粗体；}
.boxgrid{
宽度：325px；
高度：260px；
利润率：10px；
浮动：左；
背景：#161613；
边框：实心2px#8399AF；
溢出：隐藏；
位置：相对位置；
}
.boxgrid img{
位置：绝对位置；
排名：0；
左：0；
边界：0；
}
.boxgrid p{
填充：0px 10px；
颜色：#afafaf；
字体大小：粗体；
字体：10pt“Lucida Grande”，Arial，无衬线；
}
.boxcaption{
浮动：左；
位置：绝对位置；
背景：#000；
高度：260px；
宽度：100%；
不透明度：.8；
/*对于IE 5-7*/
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=80）；
/*对于IE 8*/
-MS过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=80）”；
}
$（文档）.ready（函数（）{
//要切换上/下和左/右方向，只需在“上/左”属性前面放置一个“-”
//垂直滑动
$（'.boxgrid.slidedown'）.hover（函数（）{
$（“.cover”，this.stop（）.animate（{top:'0px'}，{queue:false，duration:300}）；
}，函数（）{
$（“.cover”，this.stop（）.animate（{top:'260px'}，{queue:false，duration:300}）；
});
//标题文本稍后出现
$（'.boxgrid.slidedown'）.hover（函数（）{
$（“.delay”，this.stop（）.animate（{top:'0px'}，{queue:false，duration:500}）；
}，函数（）{
$（“.delay”，this.stop（）.animate（{top:'260px'}，{queue:false，duration:500}）；
});
});
胡说八道协会
top:260px.boxcaption.boxcaption.cover { top: 260px; }
我很高兴我们得出了相同的结论：）