setInterval中slideDown后jquery焦点不断重复帮助

Question

单击此处查看示例 http://www.mestudios.com/form/

现在，当您单击“创建帐户”时 - 就会出现是用jquery做的幻灯片动画，然后第一个输入框焦点。

$("#openc").click(function(){
    $("#close-top").slideUp(450);
    $("#openc").hide();

    setInterval(function() {             
        $("#open-me").slideDown();
        $("#regkey").focus();
        $("#closec").show();
    }, 1000);

});

我遇到的问题是，当我尝试专注于另一个输入字段来输入信息时，焦点会跳回第一个输入字段（我猜它的 setInterval 出了问题，

任何帮助都会提前得到应用。 谢谢， -O

编辑：

这有效，谢谢......下面的也有效

$("#openc").click(function(){
    $("#close-top").slideUp(450);
    $("#openc").hide();

    setTimeout(function() {          
        $("#open-me").slideDown();
        $("#regkey").focus();
        $("#closec").show();
    }, 1000);

});

Answer 1

我认为你的意思是使用 setTimeout 而不是 setInterval；它每秒持续运行该循环，这就是导致焦点跳回到第一个输入框的原因。

如果您希望动画在 SlideUp 动画完成后发生，请使用 SlideUp 方法的回调参数，而不是依赖 setTimeout。

例如：

$("#openc").click(function(){
    $("#close-top").slideUp(450,function() {             
        $("#open-me").slideDown();
        $("#regkey").focus();
        $("#closec").show();
    });
    $("#openc").hide();
});

Answer 2

始终将焦点集中到第一个输入 bcoz 您将焦点上第一个输入的 id(regkey) 设置为焦点，

 $("#regkey").focus();

而不是在下一个输入上焦点，您应该使用以下逻辑

$("input").change(function() {
  var inputs = $(this).closest('form').find(':input');
  inputs.eq( inputs.index(this)+ 1 ).focus();
});