首頁猿問 js動畫效果有bug,幫我看下

js動畫效果有bug,幫我看下

JavaScript

尚方寶劍之說 2019-04-18 18:15:45

bug就是點擊第一次不會有動畫效果,第二次以后動畫效果正常.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="">[商會]聚焦公益人文關(guān)懷...</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 回答

Qyouu

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

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

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

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

HUWWW

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

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

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