当前位置:Gxlcms > JavaScript > js渐变显示渐变消失示例代码_javascript技巧

js渐变显示渐变消失示例代码_javascript技巧

时间:2021-07-01 10:21:17 帮助过:4人阅读

以下是渐变的js代码(表示多余三行的要隐藏,点击"more"显示剩下的,点击“less”要逐渐隐藏):
代码如下:

function showAccomplishmentTableRow(){
$("#accomplishmenttable tr:hidden").first().show(2000,function(){
showAccomplishmentTableRow();
});
if($("#accomplishmenttable tr:hidden").size()==0){
$("#accomplishmenttable").next().attr("onclick","hideAccomplishmentTableRow()").text("Less");
}
}
function hideAccomplishmentTableRow(){
if($("#accomplishmenttable tr:visible").size()<=3){
$("#accomplishmenttable").next().attr("onclick","showAccomplishmentTableRow()").text("More");
return;
}

$("#accomplishmenttable tr:visible").last().hide(2000,function(){
hideAccomplishmentTableRow();
});

}

html
代码如下:
















MY ACCOMPLISHMENTS

border_bottom1Pgreye7e7e7


border_bottom1Pgreye7e7e7

border_bottom1Pgreye7e7e7


border_bottom1Pgreye7e7e7



人气教程排行