CODEWITHSUNDEEP
jquery
SPG
SPG

Reputation: 6197

jquery: how to change the size of a div from center

When I use jQuery animate() function to change the size of a div, it always begins from left-top point. How can I make it zoom from center instead from corner. For example, my code:

<div id="div1"></div>

<style>


#div1{
position: absolute;
width: 50px;
height: 50px;
background-color: red;
opacity: 0.4;
top: 40%;
left: 40%;
border-radius: 1000px;
margin: auto;
}
</style>

<script src="jquery.js"></script>
<script src="jquery.easing.1.3.js"></script>

<script>
$(document).ready(function(){
$("#div1").mouseover(function(){
    $(this).animate(
    {width: 100, height: 100, opacity: 1},
    {duration: 500,
    easing: "easeOutBounce"}
    );
});
$("#div1").mouseout(function(){
    $(this).animate(
    {width: 50, height: 50, opacity: 0.4},
    {duration: 500,
    easing: "easeOutBounce"}
    );
});
});
</script>

This will change from left-top point but I want it staring from center. Thanks!

Upvotes: 1

Views: 6501

Answers (2)

Gus
Gus

Reputation: 7349

If you want to stay with percentages in your css, you can use the jQuery position() function to get the top and left starting coordinates, along with width() and height(), and use these as the base values for your animation.

You can also get the initial settings from the css which you can use in the mouseOut function.

jsfiddle example

Upvotes: 0

Nalum
Nalum

Reputation: 4213

Here is an example using @Schroedingers Cat's suggestion. I changed the top and left positions to pixel values rather than percentages.

JavaScript:

$("#div1").mouseover(function() {
    $(this).animate({
        width: 100,
        height: 100,
        top: 75,
        left: 75,
        opacity: 1
    }, {
        duration: 500,
        easing: "easeOutBounce"
    });
});
$("#div1").mouseout(function() {
    $(this).animate({
        width: 50,
        height: 50,
        top: 100,
        left: 100,
        opacity: 0.4
    }, {
        duration: 500,
        easing: "easeOutBounce"
    });
});

CSS:

#div1{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
    opacity: 0.4;
    top: 100px;
    left: 100px;
    border-radius: 1000px;
    margin: auto;
}

Upvotes: 4

Related Questions