Jquery, some objects in class animation

Question

I'd like to do search animation like on twitter.com It means that when the user put the cursor over one element some other will be animated also.

I try to do it in that way:

$(".classinput").mouseover(function(){
    $(this).animate({
            opacity: 1,
        });
}).mouseleave(function(){
    $(this).animate({
        opacity: 0.5,
    });
});

But it doesn't work. Moving the mouse over the element animate the single element not the whole class.

Thank you in advance!

Answer 1

If you want to animate all items of the class when any are hovered, you need to do it like this:

$(".classinput").hover(function(){
  $(".classinput").stop().animate({ opacity: 1 });
}, function(){
  $(".classinput").stop().animate({ opacity: 0.5 });
});

Note also I removed the trailing comma after the opacity value, this would cause issues in IE. Also I'm using .hover() which maps to .mouseenter() and .mouseleave() to simplify it a bit. Also add a .stop() in there to prevent animation queue build-up on quick hovers.

Answer 2

if you want to animate all elements with the class classinput replace this with ".classinput".

this will only reference the the object of invocation.

$(".classinput").hover(function(){
    $(".classinput").animate({ opacity: 1}, 1000);
}, function(){
    $(".classinput").animate({ opacity: 0.5}, 1000);
});

Answer 3

Thank you both very much :)