Question

我试图用jquery显示一个元素，然后在元素显示后提交一个表单。我有以下代码。

$("#form").submit(function(e) {
        var self = this;
        e.preventDefault(); 

        $('#element').show({
            complete: function() {
                self.submit();
            },
        });
});

我遇到的问题是上面的代码在显示元素时添加动画。我想让元素直接显示而不是放松（即没有动画）。我已经尝试将持续时间选项设置为duration:1，但这似乎有不良行为，并且根本不显示该元素。我也尝试将easing选项设置为null，但也没有喜悦。

我也尝试了下面的代码（因为它没有动画）：

$("#form").submit(function(e) {
        var self = this;
        e.preventDefault(); 

        $('#element').show();
        self.submit();
});

但问题是在提交表单之前未显示该元素。

任何想法如何展示没有动画的元素，一旦元素在屏幕上，就会对表单进行求值？

使用JQuery 1.9.1

更新：

经过几个小时的拔毛之后，我遇到的问题似乎归结为Safari 6.0.3。似乎Safari在运行下一行脚本之前不会等待元素显示 - 所有其他浏览器都会这样做。设置即使只是一个小的时间延迟似乎解决了这个问题。

Answer 1

尝试：

$("#form").submit(function(e) {
        var self = this;
        e.preventDefault(); 

        $('#element').show();

        // Delay the form submission

        setTimeout(function()
        {
             self.submit();
        }, 1000);
});

它与您的示例相同，但我添加了代码以在初始操作（1000毫秒）后一秒钟延迟执行表单提交（self.submit（））。

Answer 2

show的默认持续时间为400。

我看到你已经尝试将持续时间设置为1.但是，我不确定你是怎么做到的。

试试这个：

$('#element').show( 0, function() {
                self.submit();
            }

我刚刚在这些方面做过的一些例子（没有表格提交，但是简单的东西）

你可以找到它Here

有

   $("#sample").hide();
    $("#new").hide();
    $('#clickme').click(function() {
      $('#sample').show(0, function() {
        // Animation complete.
          $("#new").show("slow") // Instead of this you submit your form
      });
});

Answer 3

还可以：

$('#element').css({display: ''})
self.submit();

由于'show'适用于display属性。

根据您的反馈;我的下一次尝试将是......

$("form").on('submit', function(e) {
  e.preventDefault();
  $("#element").css({display:''});
  submitForm($(this));
});

function submitForm(form) {
  form.is(":visible")? form.submit()
  :  setTimeout(function() {
       submitForm(form);
     }, 50);
}

希望这有效但不能保证我在移动设备上

Answer 4

使用$ .Deffered

这是一个延迟的示例，无论动画的类型或持续时间如何，只有#element显示提交表单才能真正“等待”：

Fiddle

$("#form").submit(function(e) {
    var self = this;
    $('#element')
        .show(duration)         //Use a duration of 0 to remove animation
        .promise()              //Get deferred object
        .done(function(){       //Set the "success" callback for the deferred
            self.submit();      //Submit the form
        });
    return false; //Prevent immediate submission
});

JQuery从.show（）中删除动画，并在显示元素后执行某些操作

4 个答案:

使用$ .Deffered