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 |
+---+

...而你让A更高，你对B的期望是什么？它需要向下移动以腾出空间，除非你告诉它做其他事情。

你可以通过绝对定位告诉它保持原状：

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：他们向下移动：

＆＃13;

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);
      }
    });
  });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

选项B：它们重叠：

＆＃13;

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);
      }
    });
  });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这意味着您的选择器不是特定于选择该特定元素。查看哪个其他元素具有此animated_blue_1类。尝试为元素提供ID，以便您可以使用ID而不是Class更具体。

如果不是这种情况，你必须绝对定位你的元素，请参阅TJ的回答。

更改元素大小jQuery

2 个答案: