[英]jQuery animate() expanding DIV
I am not an expert in jQuery (and to be honest, I am taking my first steps). 我不是jQuery专家(老实说,我正在迈出第一步)。
I have the example below, and what I am trying to do is choose the direction of the expansion of my div
. 我有下面的示例,我想做的就是选择
div
扩展的方向。 I am using animate()
and expanding the width
and height
. 我正在使用
animate()
并扩展width
和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;
我可以使
div
向左扩展的唯一方法是添加float: right;
in the CSS of #map
element. 在
#map
元素的CSS中。
I want it to know if there is another way to get to this, without changing the float
of #map
. 我希望它知道是否还有另一种方法可以实现,而无需更改
#map
的float
。
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>
You can change the positioning inside #map to absolute and add right:??%.The percentage works off the 100% in body tag. 您可以将#map内的位置更改为绝对位置,然后添加right:??%。该百分比在body标签的100%范围内有效。 Hope this helps for what you need :}
希望这对您的需求有所帮助:}
#map {
z-index: 1;
position: absolute;
width: 300px;
height: 250px;
border: 1px solid;
right: 50%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.