javascript - Make divs scroll horizontally using jQuery -

i'm trying making inline divs scroll horizontally clicking on toggle button, smoothly, don't know how make work : jsfiddle

here code:

   <button class="go">go</button>  <div class="right">right scroll</div> <div class="left">left scroll</div> 

jquery

$(function () {     $('.go').on('click', function(){         $('.left').animate({'left': '-105%'});         $('.right').animate({'left': '0px'});         $(this).toggleclass('return go');         $('.return').bind('click', function(){         $('.left').animate({'left': '0px'});         $('.right').animate({'left': '105%'});         $(this).toggleclass('return go');     });     }); }); 

css

.left {     min-width:100%;     min-height:300px;     background:red;     position:relative;     float:left;     clear:right;     left:0; } .right {     min-width:100%;     min-height:300px;     background:blue;     position:relative;     right:-105%;      float:left;     clear:right;  } 

not sure if want:

$(function () {     $('a').on('click', function () {         $('.left').animate({'left': '-105%'});         $('.right').animate({'left': '0px'});     }); }); 

http://jsfiddle.net/f7vdq/3/

you not animating elements, setting css. also, setting click handler on link on every click (i didn't understand why, removed it).

---

regarding updates/comments

• to make divs side-by-side, wrap them in container position: relative, , use position: absolute on divs, top: 0. don't use floats.

• don't set new click handler within click handler. doesn't replace existing click handler, adds new one. every click more animations previous 1 (and visible effect in case delay before animation starts). use if statement inside existing click handler instead:

  $('a').on('click', function(){     if($('.left').css('left') == '0px') {         $('.left').animate({'left': '-105%'});         $('.right').animate({'left': '0px'});     } else {         $('.left').animate({'left': '0px'});         $('.right').animate({'left': '105%'});     }; }); 

  working demo