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

[qq_37647363]

页面效果如图 鼠标放上去后会有个绿条升起来。

        	<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个部分有这种效果，然而做完后发现只有第一个部分有效果，求大神指点

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

[qq_37647363]

引用 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]

因为我不知道你的页面结构，不清楚你ul的父元素是哪个。 body是必然有的，所以用body