首頁(yè) 猿問(wèn) js動(dòng)畫效果有bug,幫我看下

js動(dòng)畫效果有bug,幫我看下

JavaScript

尚方寶劍之說(shuō) 2019-04-18 18:15:45

bug就是點(diǎn)擊第一次不會(huì)有動(dòng)畫效果,第二次以后動(dòng)畫效果正常.html結(jié)構(gòu)如下 <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="">[商會(huì)]聚焦公益人文關(guān)懷...</a></div> </div> <div class="eventPic"> <img src="statics/images/event.gif" alt=""> <div class="eventTitle">活動(dòng)2</div> </div> <div class="eventPic"> <img src="statics/images/event.gif" alt=""> <div class="eventTitle">活動(dòng)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 回答

Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

這樣寫
$("#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");
});
});

其實(shí)是你點(diǎn)擊已經(jīng)顯示出來(lái)的div時(shí)都會(huì)出現(xiàn)這個(gè)bug，原因是已經(jīng)顯示出來(lái)的div執(zhí)行slideDown()方法也不會(huì)有動(dòng)效，只有隱藏了的方法才會(huì)出現(xiàn)動(dòng)效

反對(duì) 回復(fù) 2019-05-13

HUWWW

TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊

1,注意綁定事件的時(shí)候不要循環(huán)綁定
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");
});

反對(duì) 回復(fù) 2019-05-13