1

我正在尝试使用 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 在运行下一行脚本之前不会等待元素显示 - 所有其他浏览器都会这样做。即使只是设置一个很小的时间延迟似乎也可以解决这个问题。

4

4 回答 4

2

尝试：

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

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

        // Delay the form submission

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

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

于 2013-03-16T15:24:09.030 回答
0

Could also:

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

Since 'show' works on the display property.

Following your feedback; my next attempt would be along the lines of...

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

Hopefully that works but no guarantees as im on mobile

于 2013-03-16T15:27:39.970 回答
0

节目的默认持续时间是400。

我看到您已尝试将持续时间设置为 1。但是，我不确定您是如何做到的。

尝试这个 ：

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

我刚刚在这些行上做了一些例子（没有提交表单，但是很简单）

你可以在这里找到它

那里

   $("#sample").hide();
    $("#new").hide();
    $('#clickme').click(function() {
      $('#sample').show(0, function() {
        // Animation complete.
          $("#new").show("slow") // Instead of this you submit your form
      });
});
于 2013-03-16T15:24:24.780 回答
-1

使用 $.Deffered

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

小提琴

$("#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
});
于 2013-03-16T16:24:19.180 回答