Question

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

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

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

我希望它知道是否有其他方法可以实现此目的，而无需更改float的{{1}}。

段：

＆＃13;

#map

＆＃13;

$(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');
        }
    });
});

＆＃13;

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;
}

＆＃13;

Answer 1

您可以将#map中的定位更改为绝对并添加右：??％。百分比可以在body标签中使用100％。希望这有助于满足您的需求：}

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

jQuery animate（）扩展DIV

1 个答案: