Help filtering childs

I have this jquery code:

$("开发者_运维知识库.button-banc").hover(function() {
    $(".button-banc img")
        .animate({ top: "-21px" }, 200).animate({ top: "-17px" }, 200) // first jump
        .animate({ top: "-19px" }, 100).animate({ top: "-17px" }, 100) // second jump
        .animate({ top: "-18px" }, 100).animate({ top: "-17px" }, 100); // the last jump
});

The effect I want is: when you pass the mouse over an image this image should jump a bit. The problem is that I got "some" images with the class "button-banc" and I want this behaive:

When you pass the mouse over, "only the actual image" should jump. The problem is that with the code I posted, every image jumps.

How can I achieve this, please help; I want to make a generic way, so that if I add images with the class, they also behaive like that. Thanks.

Change the top of your function to use this, like this:

$(".button-banc img").hover(function() {
   $(this).animate({ top: "-21px" }, 200).animate({ top: "-17px" }, 200) // first jump
          .animate({ top: "-19px" }, 100).animate({ top: "-17px" }, 100) // second jump
          .animate({ top: "-18px" }, 100).animate({ top: "-17px" }, 100); // the last jump
});

This selector attaches the hover the images in the same container with that class and animates only that image, because the image you're hovering over is what this is in the code above.

$(".button-banc").hover(function() {
    $(this).find("img")
        .animate({ top: "-21px" }, 200).animate({ top: "-17px" }, 200) // first jump
        .animate({ top: "-19px" }, 100).animate({ top: "-17px" }, 100) // second jump
        .animate({ top: "-18px" }, 100).animate({ top: "-17px" }, 100); // the last jump
});