【发布时间】：2015-08-04 17:07:55
【问题描述】：
所以我有一个侧边栏导航，当页面加载时，它会滑出屏幕，然后当用户将鼠标悬停在该区域上时，导航会滑回屏幕上。但是，当导航滑出时，如果用户在滑出动画期间将鼠标悬停在导航上，则导航会在尝试同时执行两种动画时开始闪烁。我想知道是否有办法防止这种情况和/或在滑出动画期间禁用 :hover？
侧边栏 asp.net
<div class="col-sm-3 col-md-2 sidebar slider">
<h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
<asp:CheckBoxList runat="server" ID="releaseStatusFilter" AutoPostBack="true" RepeatDirection="Horizontal" CellPadding="6" Height="5" style="margin-left:-10px">
<asp:ListItem Text="Future" Value ="Future" Selected="true"></asp:ListItem>
<asp:ListItem Text="Current" Value ="Current" Selected="true"></asp:ListItem>
<asp:ListItem Text="Completed" Value ="Completed" Selected="false"></asp:ListItem></asp:CheckBoxList>
<script type="text/javascript"></script>
<asp:ListView runat="server" ID="releaseList" style="float:left;">
<ItemTemplate>
<ul class="nav navbar nav-sidebar goo-collapsible" >
<li><a href='<%# "Release.aspx?rn="+ Eval("releaseNumber") %>'><%# Eval("releaseNumber") + " " + Eval("releaseShortName") %></a></li>
</ul>
<script type="text/javascript">
var param = location.search.split('rn=')[1]
param = param.split('%20').join(' ')
$('ul').find('a[href="Release.aspx?rn=' + param + '"]').parents('li').addClass('active');
</script>
</ItemTemplate>
</asp:ListView>
</div>
css
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
font-size: 12px;
position: fixed;
top: 120px;
width: 175px;
bottom: 0;
left: 0px;
display: block;
padding: 10px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #ccc;
border-right: 1px solid #eeeeee;
-webkit-animation: bannermoveout 0.5s linear both;
animation: bannermoveout 0.5s linear both;
}
}
@keyframes bannermoveout {
0% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes bannermoveout {
0% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
.sidebar:hover {
-webkit-animation: bannermove 0.5s linear both;
animation: bannermove 0.5s linear both;
}
@keyframes bannermove {
0% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes bannermove {
0% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
所以我设法通过使用 jquery 来为侧边栏菜单设置动画而不是 css 来修复它。谢谢大家的帮助！
jquery：
$(document).ready(function () {
$(".slider").animate({
left: '-185px'
}, "fast")
$("#slidebody").animate({
left: '0px'
}, "fast")
.queue(function () {
$(".slider").hover(function () {
$(".slider").stop().animate({ left: '0px' });
$("#slidebody").stop().animate({ left: "60px" });
$(this).dequeue();
}, function() {
$(".slider").stop().animate({ left: '-185px' });
$("#slidebody").stop().animate({ left: "0px" });
});
});
});
**slidebody 标签只是为了让我可以移动容器，这样导航就不会与容器重叠。 **
【问题讨论】：
-
我最初尝试过，但没有成功。
-
可以在 Question 中包含
html,css,js吗？ -
好吧，你也把它标记为 jQuery，所以你可以选择
.queuemethod learn.jquery.com/effects/queue-and-dequeue-explained -
查看asp.net文件你有
<script type="text/javascript"></script>一行可以删除
标签： javascript jquery html css