无法计算何时使用JQuery隐藏和显示加载动画

问题描述

| 我有一个加载动画，最初将其隐藏在application.js文件中：

$(\'#loading_field\').hide();

我有一个自动完成字段，我希望动画在用户开始键入时出现，并在出现自动完成建议结果时消失。以下是我的jQuery UI自动完成插件的jQuery代码：

$(\".showable_field\").autocomplete({
    minLength: 1,source: \'/followers.json\',focus: function(event,ui) {
       $(\'.showable_field\').val(ui.item.user.name);
       return false;
    },select: function(event,ui) {
        var video_id = $(\'#video_id_field\').val();
        var user_id = ui.item.user.id;
        $.post(\"/showable_videos.js\",{video: video_id,user: user_id});
        $(\':input\',\'#new_showable_video\').not(\':button,:submit,:reset,:hidden\').val(\'\');
        return false;
    }
});
var obj = $(\".showable_field\").data(\'autocomplete\');
obj && (obj._renderItem = function( ul,item ) {
    return $( \"<li></li>\" )
       .data( \"item.autocomplete\",item )
       .append( \"<a>\" + item.user.name + \"</a>\" )
       .appendTo( ul );
});

我应该在哪里显示和隐藏动画？     

解决方法

        因为您正在使用AJAX加载建议，所以我认为这应该对您有用：

$(\'#loading_field\').ajaxStart(function () {
  $(this).show();
}).ajaxStop(function () {
  $(this).hide();
});

    ,        好吧，jQuery UI在加载远程数据时会自动将类'ui-autocomplete-loading \'添加到您的输入中，因此，实现此目的的最简单方法是简单地将动画GIF作为背景图像输入到您的输入中当该课程出现时。 这就是他们在jQueryUI.com上的远程加载示例中所做的工作（请注意，在此示例中，您必须再输入两个字符才能启动ajax调用）。

<style>
  .ui-autocomplete-loading { background: white url(\'images/ui-anim_basic_16x16.gif\') right center no-repeat; }
</style>