懸停效果一直保持到光標移動為止

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

如果您希望將fadOut動畫的持續時間保持為500ms，則可以在complete回調內部強制UI重繪：

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

傳遞相關上下文：

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> 

Answer 2

這是因為這里的淡出效果

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

如果您將500更改為0

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

這種效果消失了。 我不知道該fadeOut函數內部發生了什么，但是有一些bug懸停在那里。