Proof that i can make a sliding pane w/ just scroll left

by aaronj1335

HTML

<script src="https://raw.github.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://raw.github.com/flot/flot/master/jquery.flot.pie.js"></script>
<!DOCTYPE html>
<html>
<head>
  <style>
  div.demo {
  border:3px solid #666666;
  margin:5px;
  padding:5px;
  width:200px;
  height:100px;
  overflow:hidden;
  }
  div.pane {
      margin:10px;
      padding:5px;
      border:2px solid #666;
      width:1000px;
      height:1000px;
      }
        </style>
</head>
<body>
    <div class="demo">
        <div class="pane">
            Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
      </div>
    </div>
</body>
</html>

JavaScript

$("div.demo").scrollLeft(300);
setTimeout(function() {
    console.log('to 200');
    $('div.demo').animate({scrollLeft: 200});
    setTimeout(function() {
        console.log('to 100');
        $('div.demo').animate({scrollLeft: 100});
        setTimeout(function() {
            console.log('to 0');
            $('div.demo').animate({scrollLeft: 0}, {
                complete: function() {
                    console.log('donezo, scrollLeft:',$('div.demo').scrollLeft());
                }
            });
        }, 1000);

    }, 1000);
}, 1000);