jQuery: unbind hover после нажатия

Question

Вот мой код. Нажмите кнопку «Смотреть другие» в полноэкранном режиме и не перемещайте курсор в течение секунды, а затем нажмите кнопку «Показать меньше» и не перемещайте курсор. Разница в том, что в первом случае поведение нормальное; во втором случае вы можете увидеть состояние зависания, пока не переместите курсор. Итак, как избавиться от этого эффекта и отменить состояние зависания?

jQuery(document).ready(function($) { 
 
    var list = $(".partners__wrap .partner"); 
 
    var numToShow = 4; 
 
    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 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 class="partner__4 partner"> 
 
     <div class="partner__pic__wrap"> 
 
     <div class="partner__4__icon partner__icon"></div> 
 
     <a class="partner__4__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__5 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__6 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__7 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 class="partner__8 partner"> 
 
     <div class="partner__pic__wrap"> 
 
     <div class="partner__4__icon partner__icon"></div> 
 
     <a class="partner__4__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

также работает в Крае ... если и изменятся от шоу, чтобы скрыть, кнопка двигается, поэтому я не могу понять, что состояние парения не меняется?!

Действительно ли это означает, что кнопка остается наполовину в одном месте и не изменяется?