当鼠标悬停在一个 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();
    })
});

- Mohamed Samy

---

使用$('#gear1,#gear2,#gear3,#gear4,#gear5').hover(Anim)。 - Uday Hiwarale

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

- Kenneth

---

它运行得很好，但是当你重置数值时，你使其旋转了-360度 :) 不过对我来说没关系，谢谢伙计 - Mohamed Samy

你需要调整设置。你可以在AnimOut中重置转换，这样当你悬停时就不会旋转了。 - Kenneth

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

---

或者这个也符合您的需求（仅在鼠标进入时动画）：

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

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

- Roko C. Buljan

---

非常复杂的问题，对我来说无法解决...你能为我解释一下吗？:) - Mohamed Samy