当悬停在div（Jquery）不工作时

Question

当我将鼠标悬停在其中一个上时，我正试图为这个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();
    })
});

Answer 1

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

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

Answer 2

function Anim(e) {
    var mEnt = e.type=='mouseenter';
    $('.gears').css({ 
        'transform' : 'rotate('+ (mEnt?360:0) +'deg)',
        'transition': 'ease 5s'
    });
}

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

---

或者这也可能适合您的需求（ 仅在mouseenter上设置动画 ）：

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

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