jquery淡化效果

时间:2015-02-26 13:28:43

标签: javascript jquery

我根据选择动态地向表添加行但是我想添加fadeIn效果。 我发布了将行添加到表中的部分。 任何帮助将不胜感激。 (我正在尝试使用fadeIn效果,同时向表中添加newRow并在之后删除tblGraphPattern内容)。我希望在行中产生效果

$( “table.selectPattern”)附加(NEWROW);

$(“#tblGraphPattern tr”)。remove();

    var newRow = $("<tr>");
                    newRow.attr("align","center");
                    newRow.css("outline", "thin solid");
                    for(var i = 1; i<counter;++i)
                    {

                        if($("#divSubject"+i+"").length>0)
                        {       
                        var cols = "";          
                        subjectText=$("#divSubject"+i+"").html();
                        if(subjectText=="Any")
                            {subjectVal = "?s"+selectCounter;}
                        else{subjectVal=$("#txtGraphSubject"+i+"").val();}

                        predicateText=$("#divPredicate"+i+"").html();
                        if(predicateText=="Any")
                            {predicateVal = "?p"+selectCounter;}
                        else{predicateVal=$("#txtGraphPredicate"+i+"").val();}
                        objectText=$("#divObject"+i+"").html();
                        if(objectText=="Any"){objectVal="?o"+selectCounter;}
                        else{
                            objectVal=$("#txtGraphObject"+i+"").val();
                        }           

                        cols += '<tr><td align="right"><div id="divSelectSubject'+num+'">'+subjectText+'</div><input type="text" value="'+subjectVal+'" name="txtSelectSubject'
                                + num + '" id="txtSelectSubject'    + num + '"/></td>';
                        cols +=  '<td align="center"><div id="divSelectPredicate'+num+'">'+predicateText+'</div><input type="text" value="'+predicateVal+
                        '" name="txtSelectPredicate' + num + '" id="txtSelectPredicate' + num + '"/></td>';
                        cols +=  '<td align="left"><div id="divSelectObject'+num+'">'+objectText+'</div><input type="text" value="'+objectVal+
                        '" name="txtSelectObject' + num + '" id="txtSelectObject'   + num + '"/></td></tr>';

                        newRow.append(cols);
                        }
                        num++;
                    }
                    selectCounter++;
                    newRow.append('<td><input type="button" class="ibtnDel"  value="Delete"></td>');

                    $("table.selectPattern").append(newRow);
                    $("#tblGraphPattern tr").remove();

1 个答案:

答案 0 :(得分:1)

通过设置newRow隐藏display:none;,然后将其附加到table.selectPattern,然后在追加完成后再填充。{/ p>

var newRow = $('<tr style="display:none;"></tr>');
// your remaining code
$("table.selectPattern").append(newRow);
$("#tblGraphPattern tr").remove();
newRow.fadeIn(2000);