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. 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. 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 ):
function Anim(e) {
$('.gears').css({
'transform' : 'rotate(360deg)',
'transition': 'ease 5s'
});
}
$(function () {
$('.gears').mouseenter(Anim);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.