jQuery animate（）扩展DIV

Question

我不是jQuery的专家（说实话，我正在采取我的第一步）。

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

目前它正在向右扩展，但我希望它改变它，所以它会扩展到左侧。我可以将div扩展到左侧的唯一方法是在#map元素的CSS中添加float: right;。

我希望它知道是否有另一种方式来得到这个，不改变#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绝对和权限添加：??％的百分比的工作离100％的身体。标签。希望这有助于你需要：}

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