悬停效果一直保持到光标移动
Hover effect stays until cursor move
转到整页。单击"查看其他"按钮。内容将展开。然后再次单击"显示更多"按钮。内容将再次展开。
现在。
将光标移到"少显示"按钮上。不要移动它,然后点击按钮。内容将被隐藏;光标将停留在其位置,但悬停效果也将停留在按钮上,直到光标移动为止。解决这个问题的办法是什么?
我制作了一个小动画来向你展示我的意思。在步骤#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>
如果你想让fadeOut动画持续500毫秒,你可以使用内部完整回调:强制重新绘制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>
这是因为这里的淡出效果
list.slice(showing - numToShow, numInList).fadeOut(500, onFadeComplete);
如果你把500改成0
list.slice(showing - numToShow, numInList).fadeOut(0, onFadeComplete);
这种影响消失了。我不知道fadeOut函数内部发生了什么,但悬停在那里时出现了一些错误。
相关文章:
- 在光标位置插入HTML,并使用javascript将光标移动到插入的HTML的末尾
- 将光标移动到输入的末尾
- 在动态创建的输入上使用向下箭头键将光标移动到下一个输入
- 自动文本区域光标移动
- 如何在chrome浏览器中的输入字段中使用只读属性时启用光标移动
- 强制光标移动到页面的一侧
- 如何根据光标移动到*的元素更改jQuery .mouseleave()的行为
- iframe关于光标移动问题的设计模式
- 如何将光标移动到所见即所得框的末尾并设置焦点
- 引导弹出窗口:当光标移动到窗口外时隐藏
- 用于创建类似excel的光标移动的Javascript
- 如何在jQuery中将光标移动到页面顶部
- 如何将光标移动到ContentEditable Span的开始/结束
- 悬停效果一直保持到光标移动
- 按Enter键时,将光标移动到下一个文本字段
- 工具提示随光标移动
- 在光标移动之前捕获array按下
- 如何使背景图像随光标移动?试图实现这个相互依赖
- 当使用上下箭头时,停止光标移动
- n -掩码角,编辑输入光标移动到结束