渐变显示渐变消失的特殊效果在使用中还是比较常见的，本文简单的实现了一个，大家如何需要可以参考下
以下是渐变的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
复制代码 代码如下:
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 |
More
以上就是js渐变显示渐变消失示例代码的详细内容，更多请关注0133技术站其它相关文章！
