I can not seem to understand why when the second div is clicked it is needing to be clicked a second time in order to run. Any help is greatly appreciated!

2. $(document).ready(function(){
3. 
   
4. var $moveOne = $('#three'),
5.         $moveTwo = $('#two');
6.   
7.     var   r = 0, 
8.         dir = true;
9. 
   
10.  
11. 
    
12.    $('.enable2').unbind().click(function(e) {
13.      if (e.target !==this)
14.        return;
15. console.log('clicked');
16.        dir = !dir;
17.        r = dir? -625 : 0;
18.        $moveOne.stop().animate({right: r+'px'}, 400);
19.        
20.    });
21.   $('.enable1').unbind().click(function(f) {
22.     if (f.target !==this)
23.        return;
24.    console.log('clicked');
25.        dir = !dir;
26.        r = dir? -625 : 0;
27.        $moveTwo.stop().animate({right: r+'px'}, 400);
28.        
29.    });
30. });