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時，它會旋轉懸停並取消懸停但鍵入-45它會旋轉懸停但是徘徊，它不會旋轉

對不起我的英語我不會使用英語到我的母語

Answer 1

它正在發生，因為在uni懸停部分的jQuery animate函數中，borderSpacing的初始值為0，你將為0.你可以使用console.log對step函數進行驗證，以便now打印出來並使用fx 。 不要使用borderSpacing因為它指向一個有效的CSS屬性，該屬性不應該是負數（來源 - http://www.w3schools.com/cssref/pr_border-spacing.asp查看屬性值標題，值長度 。）。

只需使用像rotate這樣成功的偽屬性 -

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

希望這可以幫助。