jQuery hover: использование .fadeIn / .fadeOut с .rotate - несколько указателей мыши / аутов создают изворотливую анимацию - PullRequest
Новая
       10

jQuery hover: использование .fadeIn / .fadeOut с .rotate - несколько указателей мыши / аутов создают изворотливую анимацию

0 голосов
/ 04 марта 2012

Это моя первая публикация здесь, и я довольно новичок в jQuery.

У меня есть div на моей странице (.container), который я хочу вращать и постепенно увеличивать при наведении курсора на другую (#containerHover).

Я использую jQueryRotate3.js и анимация делает то, что я хочу, исчезает при вращении при наведении и исчезает при вращении назад на mouseleave.

Я также использую hoverIntent .

У меня две проблемы:

  • Во-первых, если пользователь вводит более #containerHover и уходит до завершения анимации, он дает странные анимации, особенно при повторном входе. Я много читал о том, как решить эту проблему, если вы используете .animate - используя .stop() или плагин hoverFlow , но, насколько мне известно, они предназначены для использования с .animate(), а не .fadeIn/.fadeOut или плагин jQueryRotate3. Я пытался изменить .fadeIn()/.fadeOut() на .animate ({opacity: 0} 1500), но я не смог заставить это работать вообще (возможно, это моя вина, что я не очень хорош в jQuery).

  • Во-вторых, кажется, что при наведении курсора на .container также запускается анимация .fadeIn()/.fadeOut() и .rotate(), а это не то, что мне нужно.

Заранее спасибо за любую помощь, и вот мой код: 

$(document).ready(function () {
     $(".container").hide();
     $(".containerHover").hoverIntent(function(){
         $(".container").fadeIn(2000) .rotate({duration:1500, angle: 270, animateTo:0});
     },
     function(){
         $(".container").fadeOut(1500) .rotate({duration:3000, angle: 0, animateTo:180});
     });
 });

1 Ответ

0 голосов
/ 06 марта 2012

Хорошо ... после долгих раздумий, вот как я решил первую проблему ... 

$(document).ready(function () {
  $(".container").hide();

  $(".containerHover").rotate({
      bind:
{
 mouseover : function(){
    $(".container").stop(true,true).fadeIn(1000)  .rotate({duration:1500, angle: 180, animateTo:0}) 
    },
 mouseout : function(){
    $(".container").fadeOut(1200)  .rotate({duration:1500, angle: 0, animateTo:180}) 
  }
}
});
});

Что касается второй проблемы, мне никогда не удавалось остановить .container, запускающий анимацию, поэтому я сделал новый div без содержимого того же размера, что и .container, и поместил его поверх с более высоким Z-индексом.

...