Untitled

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />

    <link rel="stylesheet" href="../css/change.css"/>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>

<div id="wrap">
    <div id="parent">
        <div class="children">NO.1</div><div class="children">NO.2</div><div class="children">NO.3</div><div class="children">NO.4</div><div>result</div>
    </div>
</div>

<script src="../js/change.js"></script>
</body>
</html>

#wrap {
  width: 100%;
  height: 30px;
  overflow: hidden;
}
#parent {
  width: 100%;
  -webkit-transition: all .2s linear;
  white-space: nowrap;
}
#parent div {
  background-color: gray;
  width: 100%;
  height: 30px;
  display: inline-block;
}

$(function(){
    $("#parent").on('click','.children', function(e){
        var that = e.currentTarget;
        var wid = parseInt($(that).parent().css('width'));
        var margin = parseInt($(that).parent().css('marginLeft'));
        margin -= wid;
        $(that).parent().css('marginLeft', margin + "px");
    });
});