when hover on a div ( Jquery ) Not Working

Question

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

Answer 1

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);
});

Answer 2

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);
});