javascript - 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 中的定位更改为绝对定位，并添加 right:??%。该百分比在 body 标记中为 100%。希望这对您的需要有所帮助:

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