Jquery按钮单击链接

我创建了一个简单的Jquery代码

代码是

<script type="text/javascript">
            $('#Button1').click(function (evt) {
                evt.preventDefault();
                $('#Textbox1').animate({ width: '300px', height: '75px' })
            })
           </script>

$（“#按钮1”）。单击（函数（evt）{
evt.preventDefault（）；
$（'#Textbox1'）。设置动画（{width:'300px'，height:'75px'}）
})

现在我想链接结果，以便下次单击按钮 我恢复了原始文本框的大小

我尝试了下面的代码，但它不起作用。有什么建议吗

<script type="text/javascript">
            $('#Button1').click(function (evt) {
                evt.preventDefault();
                $('#Textbox1').animate({ width: '300px', height: '75px' }) })
                .animate({ width: '100px', height: '10px' })
                });
           </script>

$（“#按钮1”）。单击（函数（evt）{
evt.preventDefault（）；
$（'#Textbox1'）。设置动画（{width:'300px'，height:'75px'}）
.animate（{宽度：'100px'，高度：'10px'}）
});

这个怎么样：

<script type="text/javascript">
    $('#Button1').click(function (evt) {
        evt.preventDefault();
        $('#Textbox1').animate({ width: '300px', height: '75px' }, function() {
            $('#Textbox1').animate({ width: '100px', height: '10px' });
        });
    });
</script>

示例：

您希望在交替单击时执行两个不同的功能。第一次单击可更改大小，第二次单击可将其更改回原始大小。您可以使用：

$('#Button1').toggle(function(evt) {
    evt.preventDefault();
    $('#Textbox1').stop().animate({ width: '300px', height: '75px' });
}, function(evt) {
    evt.preventDefault();
    $('#Textbox1').stop().animate({ width: '100px', height: '10px' });
});

---

更新：。显然有人不同意我的回答。这应该表明它是有效的。

类似的东西应该是有效的

<script type="text/javascript">
           $('#Button1').click(function (evt) {
                evt.preventDefault();
             var button=$(this);
             if (button.hasClass('widecontent') {
                 $('#Textbox1').animate({ width: '100px', height: '10px' });
                  } else       
                {
                  $('#Textbox1').animate({ width: '300px', height: '75px' }) });
                }
       button.toggleClass('widecontent');
 });
</script>

$（“#按钮1”）。单击（函数（evt）{
evt.preventDefault（）；
var按钮=$（此按钮）；
if（button.hasClass（'widecontent'））{
$（'#Textbox1'）。设置动画（{width:'100px'，height:'10px'}）；
}否则
{
$（'#Textbox1'）。动画（{宽度：“300px”，高度：“75px”}）；
}
toggleClass（'widecontent'）；
});

animate

自动添加到

fx

队列中。在回调中调用它与链接它具有相同的效果。这不是OP想要的。@Felix-是的，我注意到了。OP中的术语不清楚。在我的第一次通读中，我看到了“我想连锁”，并假设他希望动画一个接一个地执行。他真正想要的是一个开关，而不是一个链子。小心你的编辑。您正在一次又一次地分配事件处理程序，而没有删除它们。。。。这将导致混乱；）@选民：请解释一下。我做错了什么？特别是当所有其他答案都以类似的方式工作时。。。

<script type="text/javascript">
           $('#Button1').click(function (evt) {
                evt.preventDefault();
             var button=$(this);
             if (button.hasClass('widecontent') {
                 $('#Textbox1').animate({ width: '100px', height: '10px' });
                  } else       
                {
                  $('#Textbox1').animate({ width: '300px', height: '75px' }) });
                }
       button.toggleClass('widecontent');
 });
</script>