想用jquery实现元素的显示与隐藏，但是animate函数没有反应，不知错在哪里？代码如下
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
.container{
width:960px;
margin:0 auto;
overflow:hidden;
height:auto;
}
.main-contents {
float:right;
}
</style>
<script type="text/javascript" src="images/js/jquery1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var spans=$('.bit span');
var divs=$('.flashcontent div')
$('.flashcontent div:gt(0)').hide();
$('.bit span').hover(function(){
var index=spans.index(this);
divs.eq(index).animate({display:block},slow)
.siblings().animate({display:none},slow);
});
});
</script>
</head>
<body>
<div class="container">
<div class="main-contents">
<div class="flashcontent">
<div><img src="images/1.jpg" width="711" height="265" /></div>
<div><img src="images/2.jpg" width="711" height="265" /></div>
<div><img src="images/3.jpg" width="711" height="265" /></div>
<div><img src="images/4.jpg" width="711" height="265" /></div>
</div>
<div class='bit'>
<span><img src="images/small_1.jpg" width="165" height="61" /></span>
<span><img src="images/small_2.jpg" width="165" height="61" /></span>
<span><img src="images/small_3.jpg" width="165" height="61" /></span>
<span><img src="images/small_4.jpg" width="165" height="61" /></span>
</div>
</div>
</div>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
.container{
width:960px;
margin:0 auto;
overflow:hidden;
height:auto;
}
.main-contents {
float:right;
}
</style>
<script type="text/javascript" src="images/js/jquery1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var spans=$('.bit span');
var divs=$('.flashcontent div')
$('.flashcontent div:gt(0)').hide();
$('.bit span').hover(function(){
var index=spans.index(this);
divs.eq(index).animate({display:block},slow)
.siblings().animate({display:none},slow);
});
});
</script>
</head>
<body>
<div class="container">
<div class="main-contents">
<div class="flashcontent">
<div><img src="images/1.jpg" width="711" height="265" /></div>
<div><img src="images/2.jpg" width="711" height="265" /></div>
<div><img src="images/3.jpg" width="711" height="265" /></div>
<div><img src="images/4.jpg" width="711" height="265" /></div>
</div>
<div class='bit'>
<span><img src="images/small_1.jpg" width="165" height="61" /></span>
<span><img src="images/small_2.jpg" width="165" height="61" /></span>
<span><img src="images/small_3.jpg" width="165" height="61" /></span>
<span><img src="images/small_4.jpg" width="165" height="61" /></span>
</div>
</div>
</div>
</body>
</html> 展开
4个回答
展开全部
animate函数不支持 display 属性，只支持下列CSS 样式
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
参考资料： http://www.w3school.com.cn/jquery/effect_animate.asp
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
显示与隐藏使用 show() / hide();
淡入 fadeIn() 或 .animate({opacity:1},slow)
淡出 fadeOut() .animate({opacity:0},slow)
淡入 fadeIn() 或 .animate({opacity:1},slow)
淡出 fadeOut() .animate({opacity:0},slow)
追问
我是想知道我这么写为什么不对，我要实现的淡入显示，淡出隐藏，不是分开的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
animate 不支持 display
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
引用xdhydn的回答：
animate函数不支持 display 属性，只支持下列CSS 样式
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
animate函数不支持 display 属性，只支持下列CSS 样式
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
展开全部
scrollTop呢？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
