Блог

Главная - Вопросы по программированию - Каков правильный способ объединить несколько анимаций с помощью jQuery?

Каков правильный способ объединить несколько анимаций с помощью jQuery?

#jquery #css #xhtml

#jquery #css #xhtml

Вопрос:

Это то, что я написал в качестве своей анимации — однако это применимо ко всем моим HTML-элементам с этой анимацией одновременно, а не к каждому из них в качестве отдельного процесса анимации.

Чего мне не хватает? 

 // JavaScript Document
          $(document).ready(function(){ 
               $('.learnmore').mouseenter(function(){
                  $(".cover").stop().animate({top:'150px'},{ duration:160});
                });

                $('.learnmore').mouseleave(function(){
                      $(".cover").stop().delay('2500').animate({top:'300px'},{ duration:160,easing:'easeOutBounce'});
                });


        });

Комментарии:

1. Вы хотите сказать, что все .covers анимируются сразу. И вы хотите анимировать одну за другой.

2. @TheSuperTramp Да. Все .covers анимируются, когда моя мышь .mouseenter (ы) — я намерен, чтобы у каждой .cover был свой собственный процесс анимации, что означает, что .cover анимируется индивидуально для .mouseenter. имеет смысл?

Ответ №1:

смотрите пример здесь. http://jsfiddle.net/robx/VdUuM/3 Пояснения также прокомментированы там с кодом.

Комментарии:

1. @robx Вот лучший пример того, в чем заключается моя проблема. Как вы увидите, все мои поля «анимируются» при наведении курсора мыши. Можете ли вы указать, в чем моя ошибка? Просто чтобы я знал, где это находится. Спасибо. jsfiddle.net/rfuLP

2. Понятия не имею, поскольку я не вижу, чтобы что-то анимировалось. Но мое предположение подсказывает мне, что это потому, что вы ориентируетесь на класс, который может быть всеми многими другими элементами. Если вы хотите анимировать только эту анимацию и прочитаете мои комментарии с объяснением в jsfiddle, вы увидите, что $ (this) относится к текущему объекту, мышь закончена. Если вы используете target, class, весь класс анимируется.

3. итак, как упоминалось ранее, если вы хотите анимировать только определенные объекты, вам нужно будет найти конкретный объект в качестве целевого.

4. попробуйте это: $ (this).parent ().find(‘.cover’).stop().animate ({…}) хотя, похоже, у вас есть и другие проблемы сами по себе, или может быть просто из-за того, что я использую safari, но я могу просмотреть только самую нижнюю ссылку «узнать больше»

5. @robx большое вам спасибо. Я запустил это с вашей помощью и комментариями! спасибо, Роб. Просто чтобы у меня были четкие знания и лучшее понимание, когда мне понадобится или придется объявить $ (this)?

Ответ №2:

Вам нужен более конкретный CSS вместо $ («.cover»). Что-то вроде

 $(this).children('.cover')...

Или

 $('.learnmore .cover')...