jQuery的懸停和線旋轉動畫

https://jsfiddle.net/eunjin/zasmLkzm/4/jQuery的懸停和線旋轉動畫

$('#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'); 
});

i顯示了別人的代碼，並使用它，但它不旋轉的 - 代碼當我鍵入+45，其旋轉懸停和unhover 但-45型它旋轉，懸停，但unhover，它旋轉不平穩

抱歉，我的英語我不使用工程來我的母語

來源

2016-09-27 Eunjin Han

你可以添加這個CSS：'.line1 { transform-origin：50％150％0; }'。一旦你改變了轉換原點，它就會像你期望的那樣工作。這是更新的[小提琴]（https://jsfiddle.net/zasmLkzm/7/）。 – sahil

我的問題是.line3，因爲.line1旋轉平穩，但.line3不是TT –

它正在發生，因爲jQuery的動畫unhover部分的功能initi borderSpacing的al值爲0，您將打到0.您可以在step函數上使用console.log進行驗證，以打印出now和fx。不要使用borderSpacing因爲它指向哪個應該不能爲負數有效的CSS屬性（來源 - http://www.w3schools.com/cssref/pr_border-spacing.asp看那屬性值標題，價值長度）。

只需使用像rotate僞屬性，它成功地在這裏工作 -

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

希望這有助於。

來源

2016-09-27 12:23:20

哦，因爲borderSpacing！謝謝你回答我的問題！ –

樂意幫忙，如果你喜歡，你甚至可以投票給我：P –

jQuery的懸停和線旋轉動畫

回答

相關問題