Question

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!

Answer 1

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