Question

所以我有一个侧边栏导航，当页面加载时，它会滑出屏幕，然后当用户将鼠标悬停在该区域上时，导航会在屏幕上滑回。然而，当导航滑出时，如果用户在滑动动画期间悬停在导航上，则导航在尝试执行两个动画时开始闪烁。我想知道是否有办法防止这种情况和/或禁用：在幻灯片播出动画期间悬停？

补充工具栏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" });
                });
            });
        });

**幻灯片标签只是为了让我可以移动容器，以便导航没有与容器重叠。 **

Answer 1

可能使用.stop（）函数。看看这个：http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

Answer 2

尝试使用以下CSS，重写以使用转换（我已删除了@media查询）：

＆＃13;

.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);
}

＆＃13;

<div class="col-sm-3 col-md-2 sidebar slider"> 
    <h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
</div>

＆＃13;

你正在敲钉子！它并不意味着被钉死，但它完成了工作。但不如钉子那么好。

过渡是为此而设计的，而不是动画动画旨在动画元素转换适用于状态之间的平滑转换。

此外，这还要短得多！

作为优化，我会改用边距。

如下所示：

＆＃13;

.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;
}

＆＃13;

<div class="col-sm-3 col-md-2 sidebar slider"> 
    <h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
</div>

＆＃13;

Answer 3

您始终可以尝试使用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));

这有帮助吗？

禁用：在Css动画期间悬停

3 个答案: