Javascript 将鼠标悬停在div（Jquery）上时不工作

当我将鼠标悬停在其中一个div上时，我试图设置该div的动画，但问题是效果（函数）只工作一次。。。只要停一次，当我停下来不工作的时候。有什么帮助吗

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

---

那是因为你的CSS已经被应用了。当用户离开时，您需要重置它。 例如：

---

或者这也可以满足您的需要（仅在mouseenter上设置动画）：

---

使用$（'#gear1，#gear2，#gear3，#gear4，#gear5'）。悬停（动画）；它工作，但当你重置值时，你进行旋转-360:）但对我来说没问题，谢谢你，你会摆弄设置。你所能做的就是在动画中重新设置过渡，这样当你悬停在非常复杂的人身上时就不会有旋转，而不是为我工作。。你能给我解释一下吗：）更多

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

function Anim(e) {
    $('.gears').css({ 
        'transform' : 'rotate(360deg)',
        'transition': 'ease 5s'
    });
}

$(function () {
    $('.gears').mouseenter(Anim);
});