Question

这是我第一次在这里发帖，而且我对jQuery很新。

我的页面上有一个div（.container），当我将鼠标悬停在另一个（#containerHover）上时，我想要旋转并淡入。

我正在使用jQueryRotate3.js 动画做我想要的，在悬停时旋转淡入淡出，在mouseleave上旋转时淡出。

我有两个问题：

首先，如果用户在动画完成之前进入#containerHover并离开，则会产生奇怪的动画，尤其是在重新输入时。如果您使用.animate - 使用.stop()或插件hoverFlow，我已经阅读了很多关于如何解决此问题的内容，但据我所知，他们是用于.animate()而非.fadeIn/.fadeOut或jQueryRotate3插件。我已经尝试将.fadeIn()/.fadeOut()更改为.animate ({opacity: 0} 1500)，但我根本无法使用此功能（这可能是我对jQuery不太擅长的错误。）
其次，在.fadeIn()/.fadeOut()上悬停时似乎也会触发.rotate()和.container动画，这不是我想要的。

提前感谢您的帮助，这是我的代码：

$(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});
     });
 });

Answer 1

好的......经过多次喋喋不休，这就是我解决第一个问题的方法......

$(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-index。 / p>

jQuery悬停：使用带有.rotate的.fadeIn / .fadeOut - 多个mouseover / outs创建狡猾的动画

1 个答案: