javascript - 更改元素大小 jQuery

Question

我想通过动画功能改变元素大小。但是当我这样做时，我所有的页面元素都向下滑动。有没有现有的方法可以避免页面元素下滑？ 我的代码:

 $(".animated_blue_1").delay(800).animate({
                "height":230,
                "width":230
            },500, function () {
                $(".animated_blue_1").animate({
                    "height":200,
                    "width":200
                },500);
            });

Answer 1

如果你有这样排列的元素:

+---+
| A |
+---+
+---+
| B |
+---+

...and you make A taller, what do you expect to happen to B? It needs to move down to make room, barring you telling it to do something else.

You could tell it to stay put by using absolute positioning:

var b = $("B"); // Obviously make the selector something real
var pos = b.position();
b.css({
    position: "absolute",
    left: pos.left,
    top: pos.top
});

...但是 A 和 B 当然会重叠。

选项 A:他们向下移动:

var run = true;
$("input[type=button]").click(function() {
  run = false;
});
go();
function go() {
  $(".foo").animate({
    width: 130,
    height: 130
  }, 500).promise().then(function() {
    $(".foo").animate({
      width: 100,
      height: 100
    }, 500).promise().then(function() {
      if (run) {
        setTimeout(go, 200);
      }
    });
  });
}

.foo {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
#a {
  background-color: #ee0;
}

<input type="button" value="Stop">
<div id="a" class="foo">A</div>
<div id="b" class="foo">B</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

选项 B:它们重叠:

var run = true;
$("input[type=button]").click(function() {
  run = false;
});
var b = $("#b");
var pos = b.position();
b.css({
  position: "absolute",
  left: pos.left,
  top: pos.top
});
go();
function go() {
  $(".foo").animate({
    width: 130,
    height: 130
  }, 500).promise().then(function() {
    $(".foo").animate({
      width: 100,
      height: 100
    }, 500).promise().then(function() {
      if (run) {
        setTimeout(go, 200);
      }
    });
  });
}

.foo {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
#a {
  background-color: #ee0;
}

<input type="button" value="Stop">
<div id="a" class="foo">A</div>
<div id="b" class="foo">B</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>