Question

我正在像这样在jQuery中使用Ajax调用...

    $.ajax({
        type: 'GET',
        url: ajax_url,
        data: {
            action: 'filter',
        },
        beforeSend: function ()
        {
            $('#results').css("opacity" , "0.5");
        },
        success: function(data)
        {
            $('#results').css("opacity" , "1");
            $('#results').html(data);
        },
        error: function()
        {
            /* Display Ajax Error Message */
            $("#results").html('<p>There has been an error</p>');
        }
    });

这很好用，它会在加载结果时淡出结果，然后在找到结果时淡入结果。

问题是，有时，如果只有很少的结果，则在不透明度转换完成之前返回它们，当前使用CSS将其设置为0.5s。

是否有办法延迟结果，或确保至少经过0.5秒的时间，以使不透明过渡有时间运行？

Answer 1

最好使用CSS动画延迟。比setTimeout（）更轻巧。

检查链接以查看其工作原理：https://www.w3schools.com/cssref/css3_pr_animation-delay.asp

Answer 2

替换：

$.ajax({
    (...)
    success: function(data) {
        $('#results').css("opacity" , "1");
        $('#results').html(data);
    },
    (...)
});

具有：

$.ajax({
    (...)
    success: function(data) {
      var delayTime = 500 // 0.5s in milliseconds

      $('#results').css('opacity' , '1');

      setTimeout(function() {
        $('#results').html(data);
      }, delayTime);
    }
    (...)
});

作为旁注：尝试保持一致，并在整个代码中使用相同的“”或“”引号，这有助于避免错误。

Answer 3

是的，您可以尝试一种更好的解决方案。您可以在$ .ajax对象中再添加一个文字，即

$.ajax({
    (...)
    success: function(data) {
      $('#results').html(data);
    },
    error: function(){},
    complete: function(){
      $('#results').css('opacity' , '1');
    }
});

完成功能在所有方法执行其工作时运行。 您只需将服务器返回的数据存储到成功方法中的结果DOM中，并将CSS添加到完整方法中的结果DOM中。 Complete方法将针对所有方法（包括成功方法）运行，并将在执行的最后阶段显示结果DOM。希望你得到解决方案...：）

Answer 4

使用带有jQuery animate的stop（true-无论在何处停止动画）方法（将从最后一步继续执行到您希望的位置）：

https://api.jquery.com/animate/

https://www.w3schools.com/jquery/eff_stop.asp

format.html {redirect_to params[:location].nil? ? @prov : provs_path(id: @prov.id, location: 1), notice: 'Success.'}

jQuery-延迟ajax，以便CSS转换有时间运行

4 个答案: