Jquery滑动动画

Question

这听起来有点模糊，但我会尝试尽可能清楚。

我有jquery的这一部分可以动画下滑框。

$(function() {
    $('.toggler').hover(function() {
        $(this).find('div').slideToggle();
    });
});

我只是想知道当用户将鼠标放在盒子上方时，是否有办法停止，盒子上下弹出然后向上和向下弹出用户鼠标越过的次数框。

我希望这很清楚。

HTML

<div class ="expandableboxes">
    <div class="toggler"> This is the title 
        <div> This is the content to be toggled </div>
    </div>

    <div class="toggler"> This is the title 
        <div> This is the content to be toggled </div>
    </div>

    <div class="toggler"> This is the title 
        <div> This is the content to be toggled </div>
    </div>

    <div class="toggler"> This is the title 
        <div> This is the content to be toggled </div>
    </div>

    <div class="toggler"> This is the title 
        <div> This is the content to be toggled </div>
    </div>
</div>

Answer 1

只需使用stop和slideDown功能。

  

.stop( [clearQueue ] [, jumpToEnd ] )

     

描述：停止匹配元素上当前正在运行的动画。

$(function() {
  $('.toggler').hover(function(e) {
    if (!$(e.target).hasClass("toggler")) { return; }
    $(this).find('div').stop().slideDown(1000, "easeOutBounce");
  });
});

.toggler > div { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="expandableboxes">
  <div class="toggler">This is the title
    <div>This is the content to be toggled</div>
  </div>

  <div class="toggler">This is the title
    <div>This is the content to be toggled</div>
  </div>

  <div class="toggler">This is the title
    <div>This is the content to be toggled</div>
  </div>

  <div class="toggler">This is the title
    <div>This is the content to be toggled</div>
  </div>

  <div class="toggler">This is the title
    <div>This is the content to be toggled</div>
  </div>
</div>

Answer 2

为避免频繁弹出上下使用mouseenter

$(function() {
 $('.toggler'). mouseenter(function() {
  $(this).find('div').slideToggle();
 });
});

请参阅演示here