當懸停在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);
});