MouseEnter / MouseLeave事件正在为每次激活排队

Question

我遇到鼠标输入和鼠标离开事件的问题，它在第一次触发时很好但如果我在动画结束前再次触发事件，例如在1秒间隔内动画执行两次。 javascript的异步性质导致事件循环将每个事件存储在队列中，直到它完成所有触发的事件。我怎么能阻止这个？如果需要我可以提供更多信息，但我似乎根本无法解决这个问题......我可能需要重新考虑我的设计方法，欢迎所有建议，但我真的想让这个工作......

我试过这个但它仍然排队：

  $('div#nav-sidebar').off('mouseleave').on('mouseleave', mouseLeaveEvent);

  $('div#nav-sidebar').off('mouseenter').on('mouseenter', mouseEnterEvent);

HTML

以下当前代码......

var mouseLeaveEvent = function() {
     console.log('sidebar mouse leave!')
        $('li#GlasswareCandles').children('ul.menu-items').slideUp(750);
        $('li#CandleTins').children('ul.menu-items').slideUp(750);
        $('li#ScentedOils').children('ul.menu-items').slideUp(750);
        $('li#Air-Fresheners').children('ul.menu-items').slideUp(750);
        $('li#OtherProducts').children('ul.menu-items').slideUp(750);
        $(this).children('ul.blog_list.toggle_list').slideUp(1500);
        return false;
};

var mouseEnterEvent = function() {
      console.log('sidebar mouse enter!')
        $(this).children('ul.blog_list.toggle_list').slideDown(500);
        return false;
};

$('div#nav-sidebar').off('mouseleave').on('mouseleave', mouseLeaveEvent);

$('div#nav-sidebar').off('mouseenter').on('mouseenter', mouseEnterEvent);

Answer 1

为什么会发生这种情况

由于jQuery动画的异步特性，每个新动画都会添加到队列中。

如何解决这个问题

您可以尝试使用Private Sub Test() Dim dU1 As Object, cU1 As Variant, iU1 As Long, lrU1 As Long Dim k As Integer, i As Integer, j As Integer, m As Integer 'Create a Dictionary with unique values of column A Set dU1 = CreateObject("Scripting.Dictionary") lrU1 = Cells(Rows.Count, 1).End(xlUp).Row cU1 = Range("A1:A" & lrU1) If lrU1 > 1 Then For iU1 = 1 To UBound(cU1, 1) dU1(cU1(iU1, 1)) = 1 Next iU1 End If 'Now dU1 has unique values from column A 'if you want to see what is in Dictionary, uncomment next three lines 'For i = 0 To dU1.Count - 1 ' MsgBox "dU1 has " & dU1.Count & " elements and key#" & i & " is " & dU1.Keys()(i) 'Next 'Write columns headers For i = 0 To dU1.Count - 1 Worksheets("Sheet2").Cells(1, i + 1) = dU1.Keys()(i) Next j = 0 m = 2 For k = 1 To UBound(cU1, 1) 'For each row of data For i = 0 To dU1.Count - 1 If Worksheets("Sheet1").Cells(k, 1).Value = dU1.Keys()(i) Then Worksheets("Sheet2").Cells(m, i + 1) = Worksheets("Sheet1").Cells(k, 2) j = j + 1 End If If j = dU1.Count Then 'go to next Sheet2 row after completing all three values (a,b,c) m = m + 1 j = 0 End If Next Next End Sub 清除队列。

来自documentation：

  

在元素上调用.stop（）时，会立即停止当前运行的动画（如果有）。例如，如果在调用.stop（）时使用.slideUp（）隐藏元素，则现在仍将显示该元素，但该元素将是其先前高度的一小部分。不调用回调函数。

     

如果在同一元素上调用多个动画方法，则后面的动画将放置在元素的效果队列中。这些动画直到第一个动画完成才会开始。调用.stop（）时，队列中的下一个动画立即开始。如果clearQueue参数的值为true，则队列中的其余动画将被删除，并且永远不会运行。

     

如果为jumpToEnd参数提供值true，则当前动画停止，但会立即为该元素指定每个CSS属性的目标值。在我们上面的.slideUp（）示例中，该元素将立即被隐藏。然后立即调用回调函数（如果提供的话）。

我尝试解决问题

从你的代码中，我假设你想要在盘旋时做点什么？我用你给我们的代码制作了一个JSFiddle。我试图制作一些类似于你的意图的东西。但是，如果没有很多代码，就会变得有点困难。

请参阅以下代码段。

＆＃13;

＆＃13;

.stop()

＆＃13;

var mouseLeaveEvent = function() {
  // Replaced the several separate calls with one call, hope you don't mind
  $('li.tab').children('ul.menu-items').stop().slideUp(750);
  $(this).children('ul.blog_list.toggle_list').stop().slideUp(1500);
  return false;
};

var mouseEnterEvent = function() {
  $(this).children('ul.blog_list.toggle_list').stop().slideDown(500);
  return false;
};

// While I was working and testing, it was easier to implement a slideDown 
// for all of the elements on the toggle by clicking it
$('h4.toggle').click(function() {
  $('div#nav-sidebar').find('li.tab').children('ul.menu-items').slideDown(500);
});

// This replaces the separate calls to register mouse enter and exit
$('div#nav-sidebar').hover(mouseEnterEvent, mouseLeaveEvent);

＆＃13;

＆＃13;

＆＃13;

我做了什么？

我将调用更改为<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav-sidebar" style="display: block;"> <h4 class="toggle" style="width: 85px;">Toggle</h4> <ul class="blog_list toggle_list"> <li id="GlasswareCandles" class="tab"> <a class="active main-tab" role="button" tilte="Glassware Candles">Glassware Candles</a> <ul class="menu-items"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </li> <li id="CandleTins" class="tab"> <a class="active main-tab" role="button" tilte="Candle Tins">Candle Tins</a> <ul class="menu-items"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </li> <li id="ScentedOils" class="tab"> <a class="active main-tab" role="button" tilte="Scented Oils">Scented Oils</a> <ul class="menu-items"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </li> <li id="Air-Fresheners" class="tab"> <a class="active main-tab" role="button" tilte="Air-Fresheners">Air-Fresheners</a> <ul class="menu-items"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </li> <li id="WaxMelts" class="tab"> <a class="active main-tab" role="button" tilte="Wax Melts">Wax Melts</a> <ul class="menu-items"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </li> <li id="OtherProducts" class="tab"> <a class="active main-tab" role="button" tilte="OtherProducts">OtherProducts</a> <ul class="menu-items"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </li> </ul> </div>，这样一次只能运行一个动画队列。要了解更多详细信息，请转到上述文档。

我还使用.stop更改了单独的调用以将鼠标事件注册到一个，并且我将对子节点的单独调用更改为更紧凑。这主要是为了可读性。

我添加了一种扩展项目的方法，这是因为在处理项目时更容易测试。

我真的希望这能解决你的问题。如果您需要更多信息或我不正确地理解问题，请告诉我。

Answer 2

$("div#nav-sidebar").off("mouseleave");
$("div#nav-sidebar").off("mouseenter");

var mouse - leave - event = function() {
  console.log('sidebar mouse leave!')
  $('li#GlasswareCandles').children('ul.menu-items').slideUp(750);
  $('li#CandleTins').children('ul.menu-items').slideUp(750);
  $('li#ScentedOils').children('ul.menu-items').slideUp(750);
  $('li#Air-Fresheners').children('ul.menu-items').slideUp(750);
  $('li#OtherProducts').children('ul.menu-items').slideUp(750);
  $(this).children('ul.blog_list.toggle_list').slideUp(1500);
  $('h4.toggle').animate({
    width: 0
  }, {
    duration: 1500,
    complete: function() {
      sidebar.style.display = 'none';
      $('img#sidebar-placeholder').show();
    }
  });
  return false;
}

$('div#nav-sidebar').on('mouseleave', mouse - leave - event);

var mouse - enter - event = function() {
  console.log('sidebar mouse enter!')
  $(this).children('ul.blog_list.toggle_list').slideDown(500);
  return false;
}

$('div#nav-sidebar').on('mouseenter', mouse - enter - event);

您可以在动画后使用上述代码段关闭活动，然后再次注册活动。

Answer 3

您可以查看此示例。它在我的网站上完美运行。 http://stark-cove-24150.herokuapp.com

 $(document).ready(function(){
 $("#designer").mouseenter(function(){
     $("#xyz").attr("src", "design.jpg");
     $("#face").css("background-image", "url(des2.jpg)");
     $("#coder").css("opacity", "0.5");
 });
 $("#designer").mouseleave(function(){
     $("#xyz").attr("src", "def.jpg");
     $("#coder").css("opacity", "");
 });
 $("#coder").mouseenter(function(){
     $("#xyz").attr("src", "cp2.jpg");
      $("#designer").css("opacity", "0.5");
      $("#face").css("background-image", "url(coding.jpg)");
 });
 $("#coder").mouseleave(function(){
     $("#xyz").attr("src", "def.jpg");
     $("#face").css("background-image", "url()");
     $("#designer").css("opacity", "");
 });
 });