Javascript 无法确定何时使用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 );
});

$（“.showable_字段”）.autocomplete({
最小长度：1，
来源：'/followers.json'，
焦点：功能（事件、用户界面）{
$（'.showable_field'）.val（ui.item.user.name）；
返回false；
},
选择：功能（事件、用户界面）{
var video_id=$（'#video_id_field'）.val（）；
var user_id=ui.item.user.id；
$.post（“/showable\u videos.js”，{video:video\u id，user:user\u id}）；
$（':input'，'#new#U showable_video'）。非（':button，：submit，：reset，：hidden'）。val（''；
返回false；
}
});
var obj=$（“.showable_字段”）.data（'autocomplete'）；
obj&（obj._renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.user.name+”）
.附录（ul）；
});

---

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

好吧，jQuery UI在加载远程数据时会自动将类“UI自动完成加载”添加到输入中，因此最简单的方法是在该类存在时将动画GIF作为输入的背景图像

这就是他们在中所做的（注意，在本例中，您必须再键入两个字符来启动ajax调用）

.ui自动完成加载{背景：白色url（'images/ui-anim_basic_16x16.gif'）右中心无重复；}

好吧，当jQuery UI加载远程数据时，它会自动将类“UI自动完成加载”添加到输入中，因此最简单的方法是在该类存在时，在输入中添加一个动画GIF作为背景图像

这就是他们在中所做的（注意，在本例中，您必须再键入两个字符来启动ajax调用）

.ui自动完成加载{背景：白色url（'images/ui-anim_basic_16x16.gif'）右中心无重复；}

因为您正在使用AJAX加载建议，我认为这应该适合您：

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

---

因为您正在使用AJAX加载建议，我认为这应该适合您：

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

---

这也是一个很好的CSS方法。回答得好，谢谢。如果OP真的想操纵其他元素来显示动画，那么您的操作似乎很有用；这也是一个很好的CSS方法。回答得好，谢谢。如果OP真的想操纵其他元素来显示动画，那么您的操作似乎很有用；然而，如果你在不同的地方加载动画，这种方式就会分崩离析…但是如果你在不同的地方加载动画，这种方式就会分崩离析。。。