所以我有一个侧边栏导航，当页面加载时，它会滑出屏幕，然后当用户将鼠标悬停在该区域上时，导航会在屏幕上滑回。然而，当导航滑出时，如果用户在滑动动画期间悬停在导航上，则导航在尝试执行两个动画时开始闪烁。我想知道是否有办法防止这种情况和/或禁用：在幻灯片播出动画期间悬停？
补充工具栏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" });
});
});
});
**幻灯片标签只是为了让我可以移动容器，以便导航没有与容器重叠。 **
答案 0 :(得分：1)
答案 1 :(得分：1)
尝试使用以下CSS，重写以使用转换（我已删除了@media查询）：
.sidebar {
font-size: 12px;
position: fixed;
top: 20px;
width: 175px;
bottom: 0;
left: 0px;
display: block;
padding: 10px;
overflow-x: hidden;
overflow-y: auto;
background-color: #ccc;
border-right: 1px solid #eeeeee;
/* v magic starts there v */
transition: ease-in-out 0.5s transform;
-webkit-transition: ease-in-out 0.5s transform;
transform: translate3d(-185px, 0px, 0px);
-webkit-transform: translate3d(-185px, 0px, 0px);
}
.sidebar:hover {
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
}<div class="col-sm-3 col-md-2 sidebar slider">
<h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
</div>
你正在敲钉子！它并不意味着被钉死，但它完成了工作。但不如钉子那么好。
过渡是为此而设计的，而不是动画 动画旨在动画元素 转换适用于状态之间的平滑转换。
此外，这还要短得多！
作为优化，我会改用边距。
如下所示：
.sidebar {
font-size: 12px;
position: fixed;
top: 20px;
width: 175px;
bottom: 0;
left: 0px;
padding: 10px;
overflow-x: hidden;
overflow-y: auto;
background-color: #ccc;
border-right: 1px solid #eeeeee;
/* v magic starts there v */
transition: ease-in-out 0.5s margin-left;
-webkit-transition: ease-in-out 0.5s margin-left;
margin-left:-185px;
}
.sidebar:hover {
margin-left: 0px;
}<div class="col-sm-3 col-md-2 sidebar slider">
<h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
</div>
答案 2 :(得分：0)
您始终可以尝试使用jQuery解除悬停事件的绑定。当你这样做时，你实际上是告诉元素在重新绑定之前不再响应事件。这是一个非常普遍的例子：
//when the animation begins, unbind the hover event
$("sidebar").bind("animationstart", $(".sidebar").unbind("hover"));
//now, when the animation ends, rebind the hover event and call the function (in this case fxn())) that should fire on the hover event
$("sidebar").bind("animationend", $(".sidebar").bind("hover", fxn));
这有帮助吗？