Question

转到整页。单击“查看其他”按钮。内容将扩大。然后再次单击“显示更多”按钮。内容将再次扩大。

现在

将光标移到“显示更少”按钮上。不要移动它。然后单击按钮。内容将被隐藏;光标将保持在其位置，但悬停效果也将保留在按钮上，直到光标移动。解决方案是什么？

我制作了一个动画片来向你展示我的意思。在步骤＃4，悬停效果应该消失，因为光标不在按钮上。

http://gifmaker.cc/PlayGIFAnimation.php?folder=20151109170rTe1miUUTXJiowKrrP4IF&file=output_KNKsQu.gif

jQuery(document).ready(function($) {
  var list = $(".partners__wrap .partner");
  var numToShow = 1;
  var button = $(".partners__button__a");
  var numInList = list.length;
  var isShowing = true;

  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    if (isShowing) {
      list.slice(showing - 1, showing + numToShow).fadeIn(500);
      onFadeComplete();
    } else {
      list.slice(showing - numToShow, numInList).fadeOut(500, onFadeComplete);

    }

  });

  function onFadeComplete() {

    var nowShowing = list.filter(':visible').length;

    if (nowShowing == numInList && isShowing) {
      isShowing = false;
      button.text("Show less");
    } else if (isShowing) {
      button.text("Show even more");

    }

    if (nowShowing == numToShow) {
      button.text("See other");
      isShowing = true;
    }

  }


});

.partners__button {
  text-align: center;
  padding-top: 16px;
}
.partners__button__a {
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  font-family: Arial;
  color: #ff4e50;
  font-size: 14px;
  background: #fff;
  padding: 10px 26px 10px 26px;
  text-decoration: none;
  border: 2px solid #ff4e50;
  font-weight: bold;
  outline: none;
  cursor: pointer;
}
.partners__button__a:hover {
  background-color: #3cb0fd;
  border-color: #3cb0fd;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="partners">
  <h2 class="partners__h2" id="find">Headline</h2>

  <div class="partners__wrap">
    <div class="partner__1 partner">
      <div class="partner__pic__wrap">
        <div class="partner__1__icon partner__icon"></div>
        <a class="partner__1__pic partner__pic__hover" href="#"></a>

      </div>
      <div class="partner__wrap">
        <h4 class="partner__name">Title</h4>

        <p class="partner__description">Text. And Text.</p>
      </div>
    </div>
    <div class="partner__2 partner">
      <div class="partner__pic__wrap">
        <div class="partner__2__icon partner__icon"></div>
        <a class="partner__2__pic partner__pic__hover" href="#"></a>

      </div>
      <div class="partner__wrap">
        <h4 class="partner__name">Title</h4>

        <p class="partner__description">Text. And Text.</p>
      </div>
    </div>
    <div class="partner__3 partner">
      <div class="partner__pic__wrap">
        <div class="partner__3__icon partner__icon"></div>
        <a class="partner__3__pic partner__pic__hover" href="#"></a>

      </div>
      <div class="partner_wrap">
        <h4 class="partner__name">Title</h4>

        <p class="partner__description">Text. And Text.</p>
      </div>
    </div>

  </div>
</div>
<div class="partners__button">
  <button class="partners__button__a">See other</button>
</div>

Answer 1

如果要保持持续时间为500毫秒的fadeOut动画，可以使用内部完整回调强制进行UI重绘：

$(this).hide().show(0);

传递相关背景：

list.slice(showing - numToShow, numInList).fadeOut(500, onFadeComplete.bind(this));

＆＃13;

jQuery(document).ready(function($) {
  var list = $(".partners__wrap .partner");
  var numToShow = 1;
  var button = $(".partners__button__a");
  var numInList = list.length;
  var isShowing = true;

  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    if (isShowing) {
      list.slice(showing - 1, showing + numToShow).fadeIn(500);
      onFadeComplete();
    } else {
      list.slice(showing - numToShow, numInList).fadeOut(500, onFadeComplete.bind(this));

    }

  });

  function onFadeComplete() {
    $(this).hide().show(0);
    var nowShowing = list.filter(':visible').length;

    if (nowShowing == numInList && isShowing) {
      isShowing = false;
      button.text("Show less");
    } else if (isShowing) {
      button.text("Show even more");

    }

    if (nowShowing == numToShow) {
      button.text("See other");
      isShowing = true;
    }

  }


});

＆＃13;

.partners__button {
  text-align: center;
  padding-top: 16px;
}
.partners__button__a {
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  font-family: Arial;
  color: #ff4e50;
  font-size: 14px;
  background: #fff;
  padding: 10px 26px 10px 26px;
  text-decoration: none;
  border: 2px solid #ff4e50;
  font-weight: bold;
  outline: none;
  cursor: pointer;
}
.partners__button__a:hover {
  background-color: #3cb0fd;
  border-color: #3cb0fd;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="partners">
  <h2 class="partners__h2" id="find">Headline</h2>

  <div class="partners__wrap">
    <div class="partner__1 partner">
      <div class="partner__pic__wrap">
        <div class="partner__1__icon partner__icon"></div>
        <a class="partner__1__pic partner__pic__hover" href="#"></a>

      </div>
      <div class="partner__wrap">
        <h4 class="partner__name">Title</h4>

        <p class="partner__description">Text. And Text.</p>
      </div>
    </div>
    <div class="partner__2 partner">
      <div class="partner__pic__wrap">
        <div class="partner__2__icon partner__icon"></div>
        <a class="partner__2__pic partner__pic__hover" href="#"></a>

      </div>
      <div class="partner__wrap">
        <h4 class="partner__name">Title</h4>

        <p class="partner__description">Text. And Text.</p>
      </div>
    </div>
    <div class="partner__3 partner">
      <div class="partner__pic__wrap">
        <div class="partner__3__icon partner__icon"></div>
        <a class="partner__3__pic partner__pic__hover" href="#"></a>

      </div>
      <div class="partner_wrap">
        <h4 class="partner__name">Title</h4>

        <p class="partner__description">Text. And Text.</p>
      </div>
    </div>

  </div>
</div>
<div class="partners__button">
  <button class="partners__button__a">See other</button>
</div>

＆＃13;

Answer 2

这是因为这里的fadeOut效果

list.slice(showing - numToShow, numInList).fadeOut(500, onFadeComplete);

如果您将500更改为0

list.slice(showing - numToShow, numInList).fadeOut(0, onFadeComplete);

这种影响消失了。我不知道在fadeOut函数中发生了什么，但是有些东西会在那里徘徊。

悬停效果一直持续到光标移动

2 个答案: