CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nikk
Nikk

Reputation: 7921

Slide absolute div with left 120%, to left -10px

I'd like to slide an absolute div, with left 120%, to left -10px on button click.

This is what I tried. But it doesn't work.

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

Upvotes: 1

Views: 227

Answers (1)

hungerstar
hungerstar

Reputation: 21725

This will do what you're asking though I don't think the result is quite what you're expecting:

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

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

Upvotes: 1

Related Questions