新手小白求教,如何在一个页面调用同一个jquery效果两次

qq_37647363 2017-02-27 02:42:20
页面效果如图 鼠标放上去后会有个绿条升起来。

        	<ul class="img_box">
<li>
<a href="#" target="_blank"><img src="cz20170227_1_img1.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
<li>
<a href="#" target="_blank"><img src="cz20170227_1_img2.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
<li style="margin-right:0px;">
<a href="#" target="_blank"><img src="cz20170227_1_img3.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
<li>
<a href="#" target="_blank"><img src="cz20170227_1_img4.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
<li>
<a href="#" target="_blank"><img src="cz20170227_1_img5.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
<li style="margin-right:0px;">
<a href="#" target="_blank"><img src="cz20170227_1_img6.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
</ul>


.img_box{width:940px;padding:0 30px;}
.img_box li{position:relative;width:280px;height:180px;float:left;display:inline;overflow:hidden;margin-right:36px;margin-bottom:30px;}
.img_box li div{position:absolute;left:0;bottom:-35px;width:280px;height:35px; background:#999;text-align:center;z-index:9999;}
.img_box li div a{font:12px/35px "宋体";}
.img_box li div.blue{background:#B4CAD7;}
.img_box li div.green{background:#C8E162;}


$(document).ready(function() {
$('.img_box li div:even').addClass('blue');
$('.img_box li div:odd').addClass('green');


$('.img_box li').mouseover(function(){
var index =$(this).index();
$('.img_box li div').eq(index).stop().animate({bottom:0},200);

});
$('.img_box li').mouseout(function(){
var index =$(this).index();
$('.img_box li div').eq(index).stop().animate({bottom:-35},200);

});

});

代码如上
由于页面有2个部分有这种效果,然而做完后发现只有第一个部分有效果,求大神指点
...全文
172 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
cn00439805 2017-02-28
  • 打赏
  • 举报
回复
因为我不知道你的页面结构,不清楚你ul的父元素是哪个。 body是必然有的,所以用body
qq_37647363 2017-02-27
  • 打赏
  • 举报
回复
引用 1 楼 cn00439805 的回复:
<script> $(function() { var $body = $(document.body); $('.img_box li div:even').addClass('blue'); $('.img_box li div:odd').addClass('green'); $body.on("mouseenter",".img_box li",function(){ $("div",this).stop().animate({bottom:0},200); }); $body.on("mouseleave",".img_box li",function(){ $("div",this).stop().animate({bottom:-35},200); }); }); </script>
谢谢,请教一下为什么要获取到body呢?
cn00439805 2017-02-27
  • 打赏
  • 举报
回复
<script> $(function() { var $body = $(document.body); $('.img_box li div:even').addClass('blue'); $('.img_box li div:odd').addClass('green'); $body.on("mouseenter",".img_box li",function(){ $("div",this).stop().animate({bottom:0},200); }); $body.on("mouseleave",".img_box li",function(){ $("div",this).stop().animate({bottom:-35},200); }); }); </script>

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧