js动画效果有bug,帮我看下

Question

bug就是点击第一次不会有动画效果,第二次以后动画效果正常.html结构如下 <div id="eventContainer">                             <ol class="eventNo">                                 <li class="active">1</li>                                 <li>2</li>                                 <li>3</li>                             </ol>                             <div id="eventDiv">                                 <div class="eventPic">                                     <img src="statics/images/event.gif" alt="">                                     <div class="eventTitle"><a href="">[商会]聚焦公益人文关怀...</a></div>                                 </div>                                 <div class="eventPic">                                     <img src="statics/images/event.gif" alt="">                                     <div class="eventTitle">活动2</div>                                 </div>                                 <div class="eventPic">                                     <img src="statics/images/event.gif" alt="">                                     <div class="eventTitle">活动3</div>                                 </div>                             </div>                         </div>js代码如下: $("#eventContainer .eventNo").find("li").each(function(){     $(this).click(function(){         $(this).addClass("active");         $(this).siblings().removeClass("active");         var $pic=$(".eventPic");         $($pic[$(this).text()-1]).slideDown("slow");         $($pic[$(this).text()-1]).siblings().hide();     }); });

Answer 1

这样写
$("#eventContainer .eventNo").find("li").each(function(){
$(this).click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
var $pic=$(".eventPic");
$pic.hide();
$($pic[$(this).text()-1]).slideDown("slow");
});
});

其实是你点击已经显示出来的div时都会出现这个bug，原因是已经显示出来的div执行slideDown()方法也不会有动效，只有隐藏了的方法才会出现动效

Answer 2

1,注意绑定事件的时候不要循环绑定
2，尽量父元素代理绑定

1-----
 $("#eventContainer .eventNo").find("li").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
                $(".eventPic").hide().eq($(this).index()).slideDown("slow");
});
2-----
 $("#eventContainer .eventNo").on('click','li',function(){
        $(this).addClass("active").siblings().removeClass("active");
                $(".eventPic").hide().eq($(this).index()).slideDown("slow");
});