[英]jquery hover and line rotate animation
https://jsfiddle.net/eunjin/zasmLkzm/4/ 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');
});
i show someone's code and using it but it doesn't rotate on - code when i type +45, it rotate hover and unhover but type -45 it rotate hover but unhover, it doesn't rotate smoothly 我显示某人的代码并使用它但它不会旋转 - 代码当我键入+45时,它会旋转悬停并取消悬停但键入-45它会旋转悬停但是徘徊,它不会旋转
sorry to my english i don't use Eng to my mother language 对不起我的英语我不会使用英语到我的母语
It is happening because in the jQuery animate function of the un-hover part the initial value of borderSpacing is 0 and you are going to 0. You can validate this using console.log
on the step function to print out now
and fx
. 它正在发生,因为在uni悬停部分的jQuery animate函数中,borderSpacing的初始值为0,你将为0.你可以使用console.log
对step函数进行验证,以便now
打印出来并使用fx
。 Don't use borderSpacing
since it points to a valid CSS property which SHOULD not be negative (Source - http://www.w3schools.com/cssref/pr_border-spacing.asp Look at the Property Values heading, value length .). 不要使用borderSpacing
因为它指向一个有效的CSS属性,该属性不应该是负数(来源 - http://www.w3schools.com/cssref/pr_border-spacing.asp查看属性值标题,值长度 。)。
Just use a pseudo property like rotate
which works successfully here - 只需使用像rotate
这样成功的伪属性 -
https://jsfiddle.net/zasmLkzm/10/ https://jsfiddle.net/zasmLkzm/10/
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.