禁用:在Css动画期间悬停

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