Question

我有一个菜单动画问题。为什么slideDown转换发生两次。 See JSFiddle here

<ul class=top-menu">
   <li>Item 1</li>
   <li>Item 2</li>
      <ul class="sub-menu">
         <li>Sub Item 1</li>
         ....
      </ul>
   </li>
</ul>

将鼠标悬停在黑色垂直菜单栏上，它会滑出，子菜单会向下滑动。

我有以下代码，以确保菜单首先向右打开，然后对任何选定的子菜单进行下滑。

$('#page-wrapper').one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    e.preventDefault();
    $('.active ul:first').slideDown('normal');
});

为什么slideDown执行两次？

感谢您的任何建议。

Answer 1

您需要在开始新动画之前停止正在进行的动画：

    SELECT *,
       CASE
         WHEN ( Count(bill)
                  OVER (
                    partition BY bill, CONVERT(DATE, bill_date)) ) > 1
              AND type IN ( 1, 2, 3 ) THEN coalesce((SELECT amount
                                            FROM   #TAB
                                            WHERE  type = 3
                                                   AND bill = t.bill),0)
         ELSE 0
       END AS Amount2
FROM   #TAB t

Answer 2

听取这样的事情，当你点击span.menu-toggle-screen时，你将一些课程（.random）添加到div#sidebar-wrapper，以及在

时

$("div#sidebar-wrapper").hover(
  function(e) {
  /* check if your div wrapper has the `random` class, if yes return false and terminate the call back */


    if ($(this).parent().hasClass("toggled-2")) {

      //$('.active ul:first').stop().slideDown('normal');

      /* Slide down any sub-menus after the main transition stops */
      $('#page-wrapper').one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
        $('.active ul:first').stop().slideDown('normal');
      });

    }
  },

jQuery css转换回调多次触发

2 个答案: