2 wild84 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();
    });
});

3个回答

zdl_01
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
qq_40154925   2017.09.13 16:21

你在点击的时候应该把其它的li的class清除掉,再给当前点击的li添加class

wild84
wild84 我也按照你的想法修改了.
2 个月之前 回复
wild84
wild84 好像不是这个问题.我加了"$("#eventContainer .eventNo").find("li").eq(0).click();"这句进去就好用了.不知道为何?
2 个月之前 回复
m0_38082783
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");
});
Csdn user default icon
上传中...
上传图片
插入图片