更改jQuery的元素大小

Question

I want to change element size by animate function. But when I do this, all my page elements are slide down. Is there any existing way to avoid sliding down elements of page? My code:

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

Answer 1

If you have elements arranged like this:

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

...but then of course A and B would overlap.

Option A: They move down:

 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> 

Option B: They overlap:

 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> 

Answer 2

It means your selector is not specific to select that particular element. Check out which other elements have this animated_blue_1 class. Try to provide an ID to the element so that you can use ID instead of Class to be more specific.

If that is not the case you have to absolutely position your element, see TJ's answer.