数据表fnFilter延迟加载器/指示符

Question

我将数据表与从此处 fnSetFilteringDelay的自定义插件一起使用fnSetFilteringDelay但想添加某种指示符或某种类型的加载器，以告诉用户何时对过滤器文本框中的键入文本进行搜索。 我已经做到了，但是这有点麻烦，也许有人可以帮助我使它变得流畅和美丽。

但是，如果您键入的内容越来越多，则指示条开始看起来像是在破碎。

如果可能的话，我想摆脱破碎的部分。

这是将数据表初始化为变量oTable之后的代码

oTable.fnSetFilteringDelay(550); //After the last character is entered, will take 550 milliseconds to search
$('#gvProjectList_filter input').parent().append($("<div id='lder' style='width: 0px; height: 30px; background-color: #999; float:right;'></div>"));
$('#gvProjectList_filter input').on('keyup', function (a) {
    document.getElementById("lder").style.width = "50px"; //Start the indicator at 50px and end at 0px
    var count = 550; //Same as the filtering delay set above

    var counter = setInterval(timer, 25); //will run it every 25 millisecond
    function timer() {
        count -= 25; //Minus 25 milliseconds
        if (count <= 0) {
            clearInterval(counter);
            document.getElementById("lder").style.width = "0px";
            return;
        }
        var neww = parseInt((count / 550) * 50); //calculate the new width vs. time left of 550ms
        document.getElementById("lder").style.width = neww + "px";
    }
});

基本上，它必须以50px宽度开始，然后向下，当用户键入另一个字符时，栏必须再次以50px开始。

---

这是我的jsFiddle演示 ，只需键入要搜索的内容，第一个字母然后是全名，您就会明白我的意思了。

---

Answer 1

我找到了自己的解决方案。 我已经利用了jQuery animate函数

oTable.fnSetFilteringDelay(550);
$('#mytable_filter input').parent().append($("<div id='lder' style='width: 0px; height: 20px; background-color: #999; float:right;'></div>"));
$('#mytable_filter input').on('keyup', function (a) {
    $("#lder").width('50px');
    $("#lder").stop().animate({width:'0px'},550);
});

奇迹般有效！

---

这是最后的小提琴 ，请查看！

---