jQuery animate() 扩展 DIV答案

【问题标题】：jQuery animate() expanding DIVjQuery animate() 扩展 DIV
【发布时间】：2015-07-21 12:39:54
【问题描述】：

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

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

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

我希望它知道是否有其他方法可以解决此问题，而无需更改 #map 的 float。

片段：

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

【问题讨论】：

Wouldn't expand to left 会扩展超出视口的左边界并带上您的按钮？
也许尝试在扩展其宽度时将框移到左侧？它看起来会向左扩展，即使它在技术上是向右扩展
@MarcoCordeiro：This is a solution I had in mind 在动画方面向left 侧扩展，因此会发生剪辑。我认为这正是@ConnorS 所指的。

标签： javascript jquery html css jquery-animate

【解决方案1】：

您可以将#map 内的定位更改为绝对位置并添加right:??%。百分比在body 标签中的100% 上起作用。希望这对您的需求有所帮助：}

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

【讨论】：