首页 文章

防止div每秒刷新列表项的动画

提问于
浏览 次
3

我有一个页面，每秒都会列出数据库中的文件 .

DESIRED RESULTS

  • 我希望 all li元素在页面加载时逐个淡出 .

  • 然后，当新文件添加到数据库时，仅淡入 new li elements ，否则没有动画到已列出的元素 .

为了获得新的文件列表，我使用的是setInterval，这反过来导致所有列表项每秒逐个淡入淡出 . 我该怎么做才能达到预期的效果？

TO SUM UP WHAT I AM ASKING

我想要一种方法来显示元素，就好像它们在页面加载时淡入 . 然后，如果将新项目添加到数据库中，则只显示具有淡化效果的新项目，但此时不应将淡化效果应用于旧项目 .

JS

$(document).ready(function() {
    var filelist = $('#file_list');
    $('#loading').show();

    var checkUpdate = function () {
        $.ajax({
            type: "GET",
            url: "generate_list.php",
            success: function (result) {
                $('#loading').hide();
                var arr = JSON.parse(result);
                console.log(arr);
                if (arr.length > 0) {
                    $('#empty_storage').hide();
                    filelist.html(arr);

                    $('li').each(function (i) {
                        $(this).delay(400*i).fadeIn(400);
                    });
                }
                else {
                    filelist.html('');
                    $('#empty_storage').show();
                }
            },
            error: function (response) {
                $('#loading').hide();
                $.alert({
                    theme: 'black',
                    title: false,
                    content: response
                });
            }
        });
        setTimeout(checkUpdate, 1700);
    };
    setTimeout(checkUpdate, 1700);
});

CSS

#file_list li
{
    overflow: hidden;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 5px;
    display: none;
}

PHP SNIPPET

// Fetching only last 10 records LIFO
    $query = $dbh->prepare("SELECT * FROM uploads ORDER BY id DESC LIMIT 10");
    $query->execute();

    $items = array();
    while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
        // Generate respective data to display
        $file_id            = $row['id'];
        $ico_path           = $base_icon_src.get_logo($row['file_ext']);
        $full_file_name     = $row['file_name'].'.'.$row['file_ext'];
        $file_ext           = $row['file_ext'];
        $file_code          = $row['file_code'];
        $download_file_path = './storage/'.$file_code.'.'.$file_ext;
        $file_size          = $row['file_size'];
        $file_upload_time   = $row['timestamps'];

        if(file_exists($download_file_path)) {
            // Generating markup
            $items[] = '<li>
                        <div class="f_icon"><img src="' . $ico_path . '"></div>
                        <div class="left_wing">
                            <div class="progressbar"></div>
                            <a class="download_link" href="#" id="'.$file_id.'"><div class="f_name">' . $full_file_name . '</div></a>
                            <div class="f_time_size">' . date("M d, Y", $file_upload_time) . '&nbsp; &#149; &nbsp;' . human_filesize($file_size) . '</div>
                        </div>
                        <div class="right_wing">
                            <div class="f_delete">
                                <a class="btn btn-danger" href="#" aria-label="Delete" data-id="'.$file_id.'" data-filename="'.$full_file_name.'">
                                <i class="fa fa-trash-o fa-lg" aria-hidden="true" title="Delete this?"></i>
                                </a>
                            </div>
                        </div>
                        </li>';
        }
    }
    //content in $items must be in UTF-8
    echo json_encode($items);
javascript php jquery html css

1 回答

  • 1

    一般而言 - 这是您应遵循的工作流程：

    • 页面加载（第一次）获取要预览的文件列表（可以是所有文件，也可以只是最后一个X） . 确保您拥有 last 项目的ID（来自数据库）（最大的ID，如果您的项目是订单） . 我们称之为 MAX_ID .

    • 加载后 - 逐个动画 .

    • 使用 setTimeout ，获取"next bulk"文件（您需要将从＃1保存的ID传递给php脚本，这样您才能获得id> max_id的文件） .

    • 如果您有新文件 - 添加它们（您可以逐个动画它们） .

    • 将 MAX_ID 更新为您从"new bulk"获得的新ID .

    • 在 success 函数内你应该再次调用（使用 setTimeout 函数获取"next bulk"（＃3）的代码 .

    这是一个简单的例子：

    $(function() {
  $('li').hide();
  $($("li").get().reverse()).each(function(i) {
    $(this).delay(400*i).fadeIn(400);
  });
});

items = ['a', 'b', 'c', 'd']
$('#a1').click(function() {
  $(items).each(function(i, val) {
    li = $('<li>').text(val).hide();
    $('#u1').prepend(li);
    li.delay(400*i).fadeIn(400);
  });
});

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="u1">
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li>2</li>
  <li>1</li>
</ul>

<div id="a1">Click to add more items</div>
    回复于

相关问题