select标记上的Ajax动画

Ajax animation on select tag

本文关键字：Ajax 动画 select      更新时间：2023-09-26

我正在AJAX调用中搜索视觉动画。但是我想要一个选择html标签上的动画，而不是整个页面上的动画。

这样做可能吗？

谢谢。

如果我要这样做，我会使用CSS创建一个助手类来显示和隐藏ajax加载程序(作为背景图像或图标(。然后，我会在ajax调用之前设置该类，然后在回调中删除它。

下面是我所说内容的演示(我将使用Font Awesome作为ajax加载程序(。

HTML

<button>Submit<i class="fa fa-circle-o-notch fa-spin"></i></button>

CSS

button{
    position:relative;
    padding:6px 32px;
    border:0;
    background:#42c827;
    color:#fff;
}
button i{
    position:absolute;
    top:7px;
    right:8px;
    opacity:0;
}
button.busy i{
    opacity:1;
}

JavaScript

$(function(){
    $('button').on('click', function(e){
       e.preventDefault();
        var btn = $(this);
        btn.addClass('busy');
        //simulate ajax call
        setTimeout(function(){
            btn.removeClass('busy');
        }, 2000);
    });
});

在这个Fiddle中看到它的实际操作。

更新

对于<select>标记，标记有点不同，但思想是相同的。相反，您将加载程序放在<select>旁边，而不是放在它的内部，并为它们提供一个外部包装。

有关使用<select>标签的演示，请参阅此Fiddle。

您可以使用jQuery ajaxStart和ajaxStop处理程序在AJAX过程中生成一些东西。

$( document ).ajaxStart(function() {
    $(".preloader").show();
});

不在select标记内，但动画可以放在它附近。我做这样的动画。。..

这是js:

    $(document).ready(function(){
    $('#refresh').click(function(){
    //show the animation here
    $('#animation_place').html("<img src='loading_anim.gif'/>");
    $.ajax({
    //write your url and type and the othre things here..
    success:function(data){
    //Bind the select tag with the new data
    $('#animation_place').html(""); //clear the animation..
    }
    });
    });
    });
相关文章：