jQuery animate() expanding DIV

Question

I am not an expert in jQuery (and to be honest, I am taking my first steps).

I have the example below, and what I am trying to do is choose the direction of the expansion of my div . I am using animate() and expanding the width and height .

At the moment it is expanding to the right, but I want it to change it, so it would expand to the left. The only way I could make the div expand to the left, is to add float: right; in the CSS of #map element.

I want it to know if there is another way to get to this, without changing the float of #map .

jsFiddle .

Snippet:

 $(document).ready(function () { $('#expand').click(function (expandir) { this.value = 'collapse'; if ($(this).data('name') === 'show') { $('#map').animate({ width: '600', height: '400' }); $('#inside').animate({ width: '600', height: '336' }); $('#expand').animate({ top: '370' }); $(this).data('name', 'hide'); } else { this.value = 'expand'; $('#map').animate({ width: '300', height: '250' }); $('#inside').animate({ width: '300', height: '169' }); $('#expand').animate({ top: '220' }); $(this).data('name', 'show'); } }); }); 

 html, body { width: 100%; height: 100%; } #map { z-index: 1; position: relative; width: 300px; height: 250px; border: 1px solid; } #expand { z-index: 4; position: absolute; top: 220px; left: 10px; width: 70px; height: 25px; } #inside { z-index: 2; position: absolute; top: 40px; right: 0; background-color: #000000; width: 300px; height: 169px; background-size: 220px 170px; background-position: 0px 0px; background-repeat: no-repeat; } #close { position: absolute; margin-top: 0; margin-left: 0; background-color: #34FF56; width: 100px; height: 50px; background-size: 220px 170px; background-position: 0px 0px; background-repeat: no-repeat; } #btn { z-index: 3; position: relative; float: left; margin: 2px; background-color: #FF9834; width: 70px; height: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="map"> <input type="button" data-name="show" value="expand" id="expand" /> <div id="inside"></div> <div id="btn"></div> </div> 

Answer 1

You can change the positioning inside #map to absolute and add right:??%.The percentage works off the 100% in body tag. Hope this helps for what you need :}

#map {
    z-index: 1;
    position: absolute;
    width: 300px;
    height: 250px;
    border: 1px solid;
    right: 50%;
}