jQueryのホバーとラインの回転アニメーション

Question

https://jsfiddle.net/eunjin/zasmLkzm/4/

$('#menu_bar').hover(function(){ 
    $('.line1').stop().animate({borderSpacing:45},{ 
     step: function(now,fx){ 
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)'); 
      $(this).css('transform','rotate('+now+'deg)'); 
     }, 
     duration:'slow' 
    },'linear'); 
    $('.line3').stop().animate({borderSpacing:-45},{ 
     step: function(now,fx){ 
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)'); 
      $(this).css('transform','rotate('+now+'deg)'); 
     }, 
     duration:'slow' 
    },'linear'); 
}, function(){ 
    $('.line1').stop().animate({borderSpacing:0},{ 
     step: function(now,fx){ 
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)'); 
      $(this).css('transform','rotate('+now+'deg)'); 
     }, 
     duration:'slow' 
    },'linear'); 
    $('.line3').stop().animate({borderSpacing:0},{ 
     step: function(now,fx){ 
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)'); 
      $(this).css('transform','rotate('+now+'deg)'); 
     }, 
     duration:'slow' 
    },'linear'); 
}); 

は私が誰かのコードを表示し、それを使用したが、それは上の回転しない - コード 私は45を入力すると、それはホバーを回転させて unhoverが、タイプ-45それはunhover一部の機能をアニメーション化、それは私はそれがためにjQueryで起こっている私の母国語

Answer 1

に工学を使用していないスムーズ

私の英語に申し訳ありません

回転しないホバーが、unhoverを回転させますイニシエーションborderSpacingの値は0で、0になります。nowとfxを出力するステップ関数でconsole.logを使用してこれを検証できます。それはは否定すべきではない有効なCSSプロパティ（ - プロパティ見出し、価値長を値でhttp://www.w3schools.com/cssref/pr_border-spacing.aspルック。出所）を指しているのでborderSpacingを使用しないでください。

ただ、ここでは、正常に動作しrotateのような擬似プロパティを使用 -

https://jsfiddle.net/zasmLkzm/10/

・ホープ、このことができます。