jquery - 如何通过单击按钮使 div 增加宽度和高度？

Question

我正在尝试获取一个按钮以使 div 出现并增加其高度和宽度身高？以及如何在这里添加按钮功能。

请帮助我对此很陌生

$(document).ready(function () {
    $("#box").click(function () {
        $(this).animate({
            width: "+=1250px"
        });
    });

    $("#box").click(function () {
        $(this).animate({
            width: '-=1250px'
        });
    });
});

Answer 1

您不需要其他功能：

   $("#box").click(function() {
        $(this).animate({
            width: "+=1250px",
            height: "1250px"
        });
    });

Answer 2

在 animate 中使用逗号分隔属性

   $(document).ready(function() {
      $("#box").click(function() {
          $(this).animate({
        width: "+=1250px",
        height: '-=250px'
           });
          });
   }); 

Answer 3

您的代码的问题是，您为单击事件注册了 2 个处理程序 - 每次单击触发两个动画时，都会触发它们。

相反，您需要的是单个处理程序，它根据加宽状态将加宽元素或将其缩小到默认状态。

尝试

jQuery(function($) {
    $("#box").click(function() {
        var $this = $(this), widened = $this.data('widened')
        $this.stop(true, true).animate({
            width: (widened ? '-' : '+' ) + "=1250px"
        });
        $this.data('widened', !widened)
    });   
}); 

演示：小提琴