wild84 于 2017.09.13 16:13 提问
- js动画效果有bug,帮我看下
-
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(); }); });
-
- zdl_01 2017.09.13 17:06
- 已采纳
这样写
$("#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()方法也不会有动效，只有隐藏了的方法才会出现动效
-
- qq_40154925 2017.09.13 16:21
你在点击的时候应该把其它的li的class清除掉，再给当前点击的li添加class
-
- m0_38082783 2017.09.13 16:52
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");
});
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！