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

这种情况正在发生，因为在非悬停部分的jQuery动画功能中，borderSpacing的初始值为0，您将为0.您可以使用步骤函数上的console.log对其进行验证以打印出{ {1}}和now。不要使用fx，因为它指向一个有效的CSS属性应该不是否定的（来源 - http://www.w3schools.com/cssref/pr_border-spacing.asp查看属性值标题，值长度。）。

只需使用borderSpacing之类的伪属性即可在此处成功运行 -

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

希望这有帮助。

jquery悬停和线旋转动画

1 个答案: