когда наведите указатель мыши на div (JQuery) Не работает

Question

Я пытаюсь анимировать этот div `s, когда я нахожусь на одном из них, но проблема в том, что эффект (функция) работает только один раз ... просто наведите указатель мыши один раз, и когда я вернусь назад, не работаю. Любая помощь?

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