如何從左至右進行動畫製作？

Question

demo：這是從右到左動畫的動畫。但我需要使用從左到右這個動畫。

基本上，我使用這個腳本：

var counter = 1; 
     var thisw = $('.btn.close').parent().outerWidth(); 
     var thish = $('.btn.close').parent().outerHeight(); 
     $('.btn.close').on('click',function(){ 
      counter = !counter; 
      if(counter){ 
      $(this).parent().animate({width: '5em', height: '2em'},1000); 
      } else{ 
       $(this).parent().animate({width: thisw, height: thish}, 1000); 
      } 
     }).click();//click trigger is added because on first click it doesn't animate 
//the reason is it is not getting actual width and height value as it is set in em but with jquery we get px value. 

我甚至覺得我的腳本可以寫成比這有點像使用三元操作更好。但我在此堆積。

問：

1. 那麼，有什麼更好的方式來寫上面的代碼的jQuery的？
2. 是否可以在不使用絕對位置的情況下從左至右進行動畫製作？

Answer 1

使用本：

div{ width: 50em; 
     height: 50em; 
     background: red; 
     float:right; 
     direction:rtl; 
    } 

    <div style="direction:rtl;"> 
     <div>click me</div> 
    </div> 

Answer 2

嘗試這種解決方案的提問。

腳本

$('div').on('click',function(){ 
    var $this = $(this); 
    if(!$this.is('.active')){ 
     $this.animate({'width':'5em','height':'5em'},1000); 
     $this.addClass('active') 
    } else{ 
     $this.animate({'width':'50em','height':'50em'},1000); 
     $this.removeClass('active') 
    } 
}); 

Fiddle Demo