Javascript 如何设置提交按钮的动画以覆盖字段并显示“提交”按钮；“成功”；消息

我是一名设计师，和一名开发人员一起工作，我试图帮助他重新创建我创建的一个设计元素。在我们的网站上，我们有一个栏目可以订阅我们的时事通讯。我设想的方式是，在用户输入他们的电子邮件并单击submit之后，submit按钮将展开以覆盖该字段，并显示一条“Success！”消息

---

我怎样才能做到这一点？提前谢谢

我想你会喜欢看这样的东西：

$（“#btn”）。单击（函数（）{
$（this.val（“成功！”）
$（此）。设置动画({
marginLeft:“-110px”，
宽度：“140px”
});
})

我希望这能解决问题

$（“#btn”）。单击（函数（）{
$（this.val（“成功！”）
$（此）。设置动画({
marginLeft:“-180px”，
宽度：“220px”
});
});

这应该给你一个开始：

$(".formFill button").click(function(){
    var $this=$(this);
    var width=$this.outerWidth();
    var inputWidth=$this.siblings("input").outerWidth();

    $this.attr("disabled",true);
    $this.text("Subscribing...");

    $this.animate({
        width:width+inputWidth,
        "margin-left":-inputWidth-4
    });

    //Imitate an ajax post with setTimeout
    setTimeout(function(){
        //succeed
        $this.text("Success!");

        setTimeout(function(){
            //return to normal
            $this.attr("style","");
            $this.removeAttr("disabled");
            $this.text("Subscribe");
        },2000);
    },3000);

});

---

好的，好主意。您是否尝试过实现这一点？您是否使用ajax提交？

$(".formFill button").click(function(){
    var $this=$(this);
    var width=$this.outerWidth();
    var inputWidth=$this.siblings("input").outerWidth();

    $this.attr("disabled",true);
    $this.text("Subscribing...");

    $this.animate({
        width:width+inputWidth,
        "margin-left":-inputWidth-4
    });

    //Imitate an ajax post with setTimeout
    setTimeout(function(){
        //succeed
        $this.text("Success!");

        setTimeout(function(){
            //return to normal
            $this.attr("style","");
            $this.removeAttr("disabled");
            $this.text("Subscribe");
        },2000);
    },3000);

});