Javascript jquery动画使其他元素跳舞

因此，jQuery

.animate（）

函数有一个问题，在这个函数中，我对一个元素设置动画，它会替换与它相关的所有其他元素

这是我正在使用的菜单：

<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9 navbar">
        <ul>
            <li id="home_button" class="menu_button">
                <i class="fa fa-home"></i>
                <p>Home</p>
            </li>
            <li id="projects_button" class="menu_button">
                <i class="fa fa-pencil"></i>
                <p>Projects</p>
            </li>
            <li id="about_button" class="menu_button">
                <i class="fa fa-balance-scale"></i>
                <p>About</p>
            </li>
            <li id="contact_button" class="menu_button">
                <i class="fa fa-user"></i>
                <p>Contact</p>
            </li>
        </ul>
    </div>
</div>

家



计划



关于



接触

为了明白我的意思，我把代码转移到了

---

感谢您的帮助

这是正常的HTML行为。浏览器“流动”布局，因此如果您使一个元素变大，它会使文档的其余部分回流，并在需要的地方替换元素

如果希望元素从一个位置移动到另一个位置，则必须将其从正常布局中移除。您可以通过将元素的

position

CSS属性设置为

relative

之外的其他属性来实现这一点。例如，

position:absolute

使元素相对于整个文档定位，

position:fixed

使元素相对于窗口边框定位，等等

此外，您可以使用CSS转换，这也不会影响布局。这些允许您对元素执行平移、旋转和缩放的组合，而无需替换其附近的同级元素。这是理想的，比如说，鼠标在屏幕上稍微增大尺寸，或者从屏幕外转换项目

无论如何，我强烈建议使用CSS动画和转换，而不是jQuery动画。然后可以使用jQuery应用类来启用和禁用动画

$（'.animation test'）。在（'click'，function（）上{
$（this.toggleClass（'animation-test--enabled'）；
});
*{
字体系列：arial、helvetica、san serif；
}
.过渡试验{
填充：20px；
背景：矢车菊蓝；
过渡：转换200ms缓进缓出；
}
.过渡测试：悬停{
转换：比例（1.1）；
}
.动画测试{
填充：20px；
背景：鲑鱼；
}
.动画测试--已启用{
动画：标识符1s无穷大；
}
@关键帧标识符{
0%{transform:translateX（0）；}
33%{transform:translateX（20px）；}
66%{transform:translateX（-20px）；}
}

将鼠标悬停在我身上，可以看到变换比例上的转换（不需要Javascript）


点击我切换动画（JavaScript应用和删除类） P>除了打破你的布局，你还必须考虑一种方法来停止和反转动画中间，否则它会继续下去，如果用户回到它可能重复。试着在小提琴上的所有按钮上快速地来回移动鼠标，看看我的意思。这很有趣，但我认为不是你想要的效果

幸运的是，并非所有问题都需要用javascript解决。CSS转换很容易理解，并且可以为您完成所有艰苦的工作。将其与psuedo选择器结合使用，您将获得想要的效果

CSS转换：


Psuedo类：



。菜单按钮{
过渡：.250s宽；
}
.菜单按钮：悬停{
宽度：100px；
}
/**注意到如此重要**/
保险商实验室{
列表样式：无；
}
.容器液体{
保证金：0；
填充：0；
}
.照片占位符{
高度：350px；
背景颜色：绿色；
}
/*导航栏菜单*/
.菜单按钮{
宽度：35px；
高度：35px；
显示：内联块；
边缘顶部：15px；
右边距：10px；
边界半径：20px；
}
#主页按钮{
背景色：红色；
}
#主页按钮i{
左边距：0.6em；
边缘顶部：0.5em；
}
#按钮{
背景颜色：蓝色；
}
#按钮i{
边缘顶部：0.5em；
左边距：0.6em；
}
#关于按钮{
背景颜色：黄色；
}
#关于按钮i{
边缘顶部：0.55em；
左边距：0.55em；
}
#接触按钮{
背景颜色：绿色；
}
#联系按钮i{
边缘顶部：0.5em；
左边距：0.75em；
}
伸展{
宽度：80px；
}



家



计划



关于



接触



顺便问一下，你知道我怎样才能使每个按钮内都有一个段落吗？就像在第一个例子中，它会说“家”，第二个例子会说“项目”，但文本会随着按钮显示出来，我不知道这超出了这个问题的范围。再问一个问题。
.menu_button{
  transition: .250s width;
}
.menu_button:hover{
  width : 100px;
}