jQuery addClass example

Change class name on click in jQuery

by Sedbol

HTML

<button class="button">Кнопка</button>
<div class="wraper">
    <div class="window">
        <ul class="list">
            <div class="bor"><img class="ava_get" src="http://picsum.photos/id/31/100/100" ></div>
            <div class="bor"><img class="ava_get"  src="http://picsum.photos/id/32/100/100" ></div>
            <div class="bor"><img class="ava_get"  src="http://picsum.photos/id/33/100/100"></div>
            <div class="bor"><img class="ava_get"  src="http://avotarov.net/picture/avatar-100/kartinki/865.jpg" ></div>
            <div class="bor"><img class="ava_get"  src="http://avotarov.net/picture/avatarki/7/kartinki/178-2.jpg" ></div>
            <div class="bor"><img class="ava_get"  src="http://avotarov.net/picture/avatarki/7/kartinki/176-2.jpg" ></div>
        </ul>
    </div>
</div>

CSS

* {
            padding: 0;
            margin: 0;
        }
        .bor {
            list-style: none;
            display: inline-block;
            float: left;
        }

        .window {
            overflow: hidden;
            position: relative;
            width: 100px;
            height: 1500px;
        }

        .wraper {
            height: 100px;
            width: 110px;
            overflow: hidden;
        }
        .ava_get{
            width:100px;
            height: 100px;
        }

JavaScript

window.onload=(function () {
        for (i = 0; i < 3; i++) {
            $(".list .bor").clone().appendTo(".list");
        }
        var button =document.querySelector('.button');
        var win =document.querySelector('.window');
        button.onclick=function(){
            win.style.top="0";
            var y = 10;
            $('.window').animate({
                top: (-(y*100)+(y*5-10)-100)
            }, 1000);
        };
    });