javascript - 将绝对 div 向左滑动 120%，向左滑动 -10px

Question

我想在点击按钮时滑动一个绝对 div，左边 120% 到左边 -10px。

这是我试过的。但它不起作用。

jQuery

$('.button').click(function() {
    $(this).parent().find('#window').css('left', '-120%');
    $(this).css('left', '-10px');
});

HTML

<div id="main-container">
    <div class="popular-item">
        <div class="text"></div>
        <div class="button">
            ENTER
        </div>
    </div>
    <div id="window"></div>
</div>

CSS

html body div#main-container div#window {
    position: absolute;
    float: none;
    clear: both;
    display: block;
    overflow: hidden;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(167,157,157,1);
    background-color: #377bc2;
    border-left: 10px solid #2173AD;
    z-index: 10;
}

html body div#main-container {
    position: relative;
    float: none;
    clear: both;
    display: block;
    overflow: hidden;
    max-width: 600px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    background-color: rgba(167,157,157,0.1);
    z-index: 1;
}   

Answer 1

虽然我认为结果并不完全符合您的预期，但这会满足您的要求:

$( '.button' ).click( function() {
    $( '#window' ).css( 'left', '-10px' );
} );

JSFiddle:https://jsfiddle.net/w4fmbn09/