Jquery, некоторые объекты в классе анимации

Question

Я бы хотел сделать анимацию поиска, как на twitter.com. Это означает, что когда пользователь наведет курсор на один элемент, будет анимирован и другой.

Я пытаюсь сделать это следующим образом:

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

Но это не работает.При наведении курсора на элемент анимируется отдельный элемент, а не весь класс.

Заранее спасибо!

Answer 1

Если вы хотите анимировать все элементы класса при наведении, вам нужно сделать это следующим образом:

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

Обратите внимание, я также удалил запятую после значения непрозрачности, это может вызвать проблемы в IE. Также я использую .hover(), который отображается на .mouseenter() и .mouseleave(), чтобы немного упростить его. Также добавьте туда .stop(), чтобы предотвратить нарастание очереди анимации при быстром наведении.