[英]when hover on a div ( Jquery ) Not Working
I'm trying to animate this div`s when I hover on one of them , but the problem is the effect (the function) working only one time... just hover one time and when I hover back not working. 当我将鼠标悬停在其中一个上时,我正试图为这个div设置动画,但问题是效果(功能)只工作一次......只是悬停一次,当我徘徊不起作用时。 Any help?
有帮助吗?
function Anim() {
$('#gear1,#gear2,#gear3,#gear4,#gear5').css({
'transform': 'rotate(360deg)',
'-ms-transform': 'rotate(360deg)',
'-webkit-transform': 'rotate(360deg)',
'transition': 'ease 5s'
});
};
$(document).ready(function () {
$('#gear1,#gear2,#gear3,#gear4,#gear5').hover(function () {
Anim();
})
});
That's because your CSS is applied already. 那是因为你的CSS已经应用了。 You'd need to reset it when the user hovers away.
当用户徘徊时,您需要重置它。 Example:
例:
function Anim() {
$('#gear1,#gear2,#gear3,#gear4,#gear5').css({
'transform': 'rotate(360deg)',
'-ms-transform': 'rotate(360deg)',
'-webkit-transform': 'rotate(360deg)',
'transition': 'ease 5s'
});
};
function AnimOut() {
$('#gear1,#gear2,#gear3,#gear4,#gear5').css({
'transform': 'none',
'-ms-transform': 'none',
'-webkit-transform': 'none',
'transition': 'ease 5s'
});
};
$(document).ready(function () {
$('#gear1,#gear2,#gear3,#gear4,#gear5').hover(Anim, AnimOut);
});
function Anim(e) {
var mEnt = e.type=='mouseenter';
$('.gears').css({
'transform' : 'rotate('+ (mEnt?360:0) +'deg)',
'transition': 'ease 5s'
});
}
$(function () {
$('.gears').hover(Anim);
});
Or this might also suit your needs ( animate only on mouseenter ): 或者这也可能适合您的需求( 仅在mouseenter上设置动画 ):
function Anim(e) {
$('.gears').css({
'transform' : 'rotate(360deg)',
'transition': 'ease 5s'
});
}
$(function () {
$('.gears').mouseenter(Anim);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.