Question

基本上我正在尝试创建一行“单元格”（只是一个黑色正方形或白色正方形的图像，具体取决于其ID）。问题是，当单击按钮时，生成“行”列表并在没有应用css的情况下向用户显示一段短暂的时间，然后应用css并正确显示。有没有办法以相反的方式执行此操作，以便应用css，然后显示表格？

的CSS

    ol, li { display: inline; margin: 0 0 0 0; padding: 0 0 0 0; list-style: none; }
    img { margin: 0 0 0 0; padding: 0 0 0 0; }

Jquery的

            $('#generateTbl').hide();
        $('#generateBtn').click(function () {
                showCellConfiguration();
        });

        var showCellConfiguration = function () {
            loadCells($('#numOfCells').val());
            $('#generateTbl').show('slow', function () { });
        }

        var loadCells = function (numOfCells) {
            for (var i = 0; i < numOfCells; i++) {
                $("#row").append('<li><img id="cellOff" class="buttons" src="off.jpg" /></li>');
            }
        }

HTML

<table id='generateTbl'>
    <tr><td><ol id="row"></ol></td></tr>
</table>

Answer 1

var loadCells = function (numOfCells) {
            for (var i = 0; i < numOfCells; i++) {
                var item = $('<li><img id="cellOff" class="buttons" src="off.jpg" /></li>');
                item.ready(function() {
                    $("#row").append($(this));
                });

            }
        }

希望工作

Answer 2

这感觉有些黑客攻击，但您可以尝试在屏幕上设置新DOM的position一小段时间，然后再添加：

var loadCells = function (numOfCells) {
    for (var i = 0; i < numOfCells; i++) {
        var newItem = $('<li><img id="cellOff" class="buttons" src="off.jpg" /></li>');

        //set the element off the screen
        newItem.css({ 
            position: absolute,
            left: -9999
        });

        $("#row").append(newItem);

        //now move it back onto the screen after             
        newItem.css({
           position: auto
        });
    }
}

您甚至可以在将元素移回屏幕之前添加超时，如下所示：

$("#row").append(newItem);

//wait 200 ms before moving the item into position    
window.setTimeout(function() {
    newItem.css({
        position: auto
    });
}, 200);

如何在使用jquery .show显示css之前将其应用于内联列表

2 个答案: