JQuery Animate - Comment appliquer une animation à l'image survolée et non à toutes les images de la même classe? - jquery, html, jquery-animate

Ceci est mon code jQuery:

$(document).ready(function() {

$(".bottommrg").mouseenter(function() {
$(".bottommrg").animate({
marginTop: "-20px"
}, {
duration: 500,
easing: "easeOutCubic",
complete: function() {

$(this).animate({
marginTop: "0px"
}, {
duration: 500,
easing: "easeInCubic"
});

$(this).animate({
marginTop: "-10px"
}, {
duration: 300,
easing: "easeInCubic"
});

$(this).animate({
marginTop: "0px"
}, {
duration: 300,
easing: "easeInCubic"
});

}
});

}).mouseleave(function() {
$("img", this).stop().css({
marginTop: "0px"
});
});

});

et ceci est un exemple d'image:

<img src="/images/images/car-park.png" class="alignleft bottommrg" alt=""/>

J'ai créé un violon, mais pour une raison quelconque, cela ne fonctionnera pas: http://jsfiddle.net/FGpCP/7/

Quoiqu'il en soit, mon animation fonctionne, mais lorsque vous passez la souris sur une image de la même classe, elles s'animent toutes lorsque je ne souhaite animer que l'image en cours de survol.

Je réalise que vous pouvez le faire en utilisant le id tag mais alors je voudrais avoir le même code mis en place 6 fois.

En outre, ce que j’essayais de faire, c’était une sorte d’effet de rebond. C’est bien mais ce n’est pas parfait, si quelqu'un a des suggestions pour améliorer l’apparence que je ne l’apprécierais vraiment.

Je sais qu'il existe un plugin Bounce, mais je préférerais le réaliser de cette façon.

Merci.

Réponses:

1 pour la réponse № 1

Changer la façon dont la fonction animate est configurée à l’entrée de la souris doit être

 $(yourclass).mouseenter(function() {
$(this).animate(function()...
...);

Cela a-t-il du sens

---

1 pour la réponse № 2

Etes-vous en train d'intégrer le type d'accélération que vous essayez d'utiliser (aisanceCubique) à un moment donné? Selon: http://api.jquery.com/animate/ les seules valeurs "prêtes à l'emploi" doivent être "swing" et "linear". (Mon JS-console dit: Object #<Object> has no method "easeOutCubic" ainsi donc je suppose que cela pourrait être le problème).

Voir: http://jsfiddle.net/frederikring/BHSxQ/ travail

---

0 pour la réponse № 3

Je n’ai pas essayé cela moi-même, mais vous pouvez voir si cela fonctionne. $ (Document) .ready (fonction () {

$(".bottommrg").mouseenter(function() {
$(this).animate({
marginTop: "-20px"
}, {
duration: 500,
easing: "easeOutCubic",
complete: function() {

$(this).animate({
marginTop: "0px"
}, {
duration: 500,
easing: "easeInCubic"
});

$(this).animate({
marginTop: "-10px"
}, {
duration: 300,
easing: "easeInCubic"
});

$(this).animate({
marginTop: "0px"
}, {
duration: 300,
easing: "easeInCubic"
});

}

}); `

J'ai changé le deuxième appel de la classe en ceci, de cette façon il s'exécutera sur l'élément spécifique, essayez ceci, dites-moi si cela fonctionne, je peux vous aider davantage

---