当另一个 div 覆盖它时，如何取消 div 上的 JQuery 动画答案

【问题标题】：How do I cancel a JQuery animation on a div, when another div lays over it当另一个 div 覆盖它时，如何取消 div 上的 JQuery 动画
【发布时间】：2016-02-09 14:01:35
【问题描述】：

我尝试在我的网站一侧制作某种菜单，其中显示了一小部分菜单，当您将鼠标悬停在它上面时，它会滑出以便您可以点击它。菜单的其余部分位于主网站 div 下方，问题是当您将鼠标悬停在主网站下方的 div 上时，您仍然会激活不应该发生的动画。

<body>
    <div id="container">
        <div id="header">
            <img id="headerimg" src="pokebalicon.png" />
       </div>
       <div class="sidediv" id="first" style="margin-top: 100px;">
           <p></p>
       </div>
       <div id="mainpage">
           text
       </div>
    </div>
</body>

CSS

#container {
    width: 820px;
    height: 700px;
    margin: 100px auto;
    position: relative;
}
#header {
    padding: 10px;
    height: 100px;
    width: 100%;
    background-color: transparent;
    overflow: hidden;
}
#mainpage {
    height: 600px;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #D5D4D4;
    position: absolute;
    pointer-events: none;
}
.sidediv{
    position: absolute;
    left: 721px;
    top: 80px;
    height: 40px;
    width: 170px;
    text-align: center;
    margin-top: 50px;
    border-radius: 0 5px 5px 0;
    background-image: url(wood.png);
    background-size: cover;
}

还有我的 JQuery

$(document).ready(function(){
    $('#first').mouseenter(function() {
        $('#first').animate({
            left:'841px'
        });
    });
    $('#first').mouseleave(function() {
        $('#first').animate({
            left:'721px'
        });
    });
});

有人知道如何解决我的问题吗？为了澄清，这里有一些图片

http://imgur.com/q8dq7n7 当我将鼠标悬停在菜单上时会发生这种情况 http://imgur.com/FvDCa4E 菜单位于白色 div 下方，但是当将鼠标悬停在白色 div 和菜单上时，它会启动动画并尝试滑出，这是不应该发生的。

【问题讨论】：

不清楚你的问题，你能解释的更详细一点吗？
添加了两张图片以进一步阐明我的意思。
还是不清楚，请做个jsfiddle
我认为如果您只是阅读所有内容并查看图像就很清楚......

标签： jquery html css jquery-animate

【解决方案1】：

您必须更改 sidediv 的结构。基本上，你必须有一个鼠标悬停的元素，让我们称之为 .arrowside 和一个用于你的内容的元素，我们将你的 sidediv 作为父级。

<div id="container">
    <div id="header">
        <img id="headerimg" src="https://g.twimg.com/about/feature-corporate/image/typography.png" />
   </div>

    <div id="mainpage">
       text
   </div>

   <div class="sidediv" style="margin-top: 100px;">
       <span class="consentside"> asdas </span>
       <span class="arrowside">  > > > </span>
   </div>
    <div class="sidediv" style="margin-top: 150px;">
       <span class="consentside"> 4234234 </span>
       <span class="arrowside">  > > > </span>
   </div>

</div>

我还添加了一点 css

.arrowside{
   float : right;
}

最后是你的 JQuery，我做了一个 self = this，这样父元素就不会丢失。这是它的工作原理；所以我们希望每个菜单项都有 3 个元素，一个是菜单的尖端，另一个是内容，显然我们有父 div。基本上，鼠标进入了菜单的一小部分，然后菜单将移出，现在要返回菜单，我们需要将鼠标移出父 div。

$('.sidediv').each(function(){
    var self = this;
     $(self).find('.arrowside').mouseenter(function(){
    $(self).stop().animate({width: '390px'}, 1000);
});
    $(self).mouseleave(function(){
        $(self).stop().animate({width: '170'}, 1000)
    });

});

这是JSFiddle。

【讨论】：