悬停在/向外使我的div闪烁

Question

我正试图制作一个流畅的div。我有以下jQuery代码：

$(".centered-wrapper>main>.event").hoverIntent({
    over: function() {
      var pos = $(this).position();
      $presentationEvent = $(this);
      $fullEvent = $(this).clone();
      $fullEvent.addClass("full");
      $(this).css("visibility", "hidden");

      $fullEvent.css({
        position: "absolute",
        top: pos.top,
        left: pos.left
      });

      $(".centered-wrapper>main").append($fullEvent);
      $fullEvent.find("main").slideDown(50, function() {
        $fullEvent.find("footer").slideDown(50);
      });
      $fullEvent.animate({boxShadow: "0px 5px 5px 0px rgba(0,0,0,0.5);"}, 100);

      console.log( $(".centered-wrapper>main>.event.full"));

      $(".centered-wrapper>main>.event.full").on("mouseout", function() {
        $(this).find("main, footer").slideUp(100);
        $(this).remove();
        $presentationEvent.css("visibility", "visible");
      });
    },
    out: function() {}
  });

一切顺利，直到我将光标上下移动到该元素上，因为它会闪烁并出现并消失......

<div class="event">
  <header>
    <img class="photo" src="/res/users/events-photos/bal.jpg" alt=""/>
    <div class="event-card">
      <div class="date">
        <!-- content -->
      </div>
  </header>
  <main>
    <!-- content -->
  </main>
  <footer>
    <!-- content -->
  </footer>
</div>

我如何解决这个问题？我错在哪里？

Answer 1

您需要停用多个排队的动画。实现这一目标的最佳方法是stop()。

<强> http://api.jquery.com/stop/

根据文件：

$( "#hoverme-stop-2" ).hover(function() {
  $( this ).find( "img" ).stop( true, true ).fadeOut();
}, function() {
  $( this ).find( "img" ).stop( true, true ).fadeIn();
});

在你的情况下：

$fullEvent.find("main").stop(true,true).slideDown(50, function() {
  $fullEvent.find("footer").stop(true,true).slideDown(50);
});

和

$(this).find("main, footer").stop(true,true).slideUp(100);

Answer 2

可见性隐藏代码会干扰元素悬停并导致闪烁。用另一种方法隐藏它。像

.event:hover
{
    opacity: 0;
}

为避免触发事件，请使用'pointer-events：none;'

 .event:hover
{
        opacity: 0;
        pointer-events: none;
}