想不通的时候隐藏和显示加载动画使用jQuery [英] Cannot figure out when to hide and show loading animation with JQuery

问题描述

我有一个加载动画，我最初是藏在我的application.js文件中写：

I have a loading animation which I initially hide in my application.js file:

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

我有一个自动完成场，我想，当用户开始输入的动画出现，并在自动完成建议，结果显示它消失。下面是我的jQuery code的jQuery用户界面自动完成插件：

I have an autocomplete field, and I want the animation to appear when the user starts typing, and for it to disappear when the autocomplete suggestion results appear. Below is my jquery code for the jquery ui autocomplete plugin:

$(".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 );
});

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

Where should I show and hide the animation?

推荐答案

由于您使用AJAX来加载，我认为这应该为你工作的建议：

Because you're using AJAX to load the suggestions I think this should work for you:

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

这篇关于想不通的时候隐藏和显示加载动画使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！