jQuery animate（）扩展DIV

Question

我不是jQuery专家（老实说，我正在迈出第一步）。

我有下面的示例，我想做的就是选择div扩展的方向。 我正在使用animate()并扩展width和height 。

目前，它向右扩展，但我希望它进行更改，因此它将向左扩展。 我可以使div向左扩展的唯一方法是添加float: right; 在#map元素的CSS中。

我希望它知道是否还有另一种方法可以实现，而无需更改#map的float 。

jsFiddle 。

片段：

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

您可以将#map内的位置更改为绝对位置，然后添加right：??％。该百分比在body标签的100％范围内有效。 希望这对您的需求有所帮助：}

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