问题描述:

Go to full page. Click on the "See other" button. The content will expand. Then click again on the "Show even more" button. The content will expand again.

Now.

Move your cursor over the "Show less" button. Don't move it. Then click on the button. The content will be hidden; the cursor will stay on its place but the hover effect will also stay on the button until cursor move.

What is the solution to this?

I've made a little animation to show you what I mean. On step #4 the hover effect should disappear because the cursor isn't on the button.

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>

网友答案:

If you want to keep fadeOut animation with 500ms duration, you could force UI repaint using inside complete callback:

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

Passing relevant context:

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

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;
    }

  }


});
.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>
网友答案:

It is because of the fadeOut effect here

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

if you change that 500 to 0

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

that effect goes away. I dont know whats happening inside that fadeOut function but something bugs the hover there.

相关阅读:
Top