Javascript jquery悬停和直线旋转动画

我展示某人的代码并使用它，但它不会在代码上旋转 当我输入+45时，它会旋转悬停并取消悬停 但是-45型旋转悬停，但取消悬停，旋转不平稳

---

对不起，我的英语我不使用英语作为我的母语，因为在取消悬停部分的jQuery animate函数中，borderSpacing的初始值是0，而您将使用0。您可以使用step函数中的

console.log

来验证这一点，以便立即打印

now

和

fx

。不要使用

borderSpacing

，因为它指向一个有效的CSS属性，该属性不应为负（源代码-查看属性值标题，值长度）

只需使用一个伪属性，如

rotate

，它可以在这里成功地工作-

---

希望这会有所帮助。

这是因为在取消悬停部分的jQuery animate函数中，borderSpacing的初始值是0，而您要将其设置为0。您可以使用step函数中的

console.log

来验证这一点，以便立即打印

now

和

fx

。不要使用

borderSpacing

，因为它指向一个有效的CSS属性，该属性不应为负（源代码-查看属性值标题，值长度）

只需使用一个伪属性，如

rotate

，它可以在这里成功地工作-

---

希望这有帮助。

您可以添加此css:

.line1{转换原点：50%150%0；}

。更改变换原点后，它将按预期工作。这是更新后的。我的问题是.line3，因为.line1是平滑旋转的，但是.line3不是。您可以添加以下css:

.line1{变换原点：50%150%0；}

。更改变换原点后，它将按预期工作。这是更新后的。我的问题是.line3，因为.line1是平滑旋转的，但是.line3没有旋转，因为边界间距！谢谢你回答我的问题！！很乐意帮忙，如果你愿意的话，你甚至可以投票支持我：嘘，是因为我！谢谢你回答我的问题！！很乐意帮忙，如果你愿意，你甚至可以投票支持我：P

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