滑动绝对div左边120%,左边-10px

时间:2015-12-19 22:55:30

标签: javascript jquery html css

我想在按钮点击时将左侧120%的绝对div滑动到左侧-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;
}   

1 个答案:

答案 0 :(得分:1)

虽然我认为结果不是你所期待的,但这会做你要问的事情:

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

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