JQuery动画()没有动画效果
JQuery动画()没有动画效果
提问于 2019-02-15 02:16:46
我想要动画的侧边栏来到屏幕上，一旦用户已经点击菜单切换按钮。
控制台中没有任何错误，当我在控制台中放置一个alert()函数并执行时，当单击menu按钮时，它肯定会触发。尽管如此，侧边栏从未出现在屏幕上。
代码如下：
侧边栏
<div class="sidebarContainer"
style="width: 15em; height: 100%; position: fixed; left: -300px; background-color: #333; z-index: 999; overflow: scroll;">
<div class="titleContainer"
style="text-align: center; padding-top: 2rem; padding-bottom: 1rem; background-color: #222;">
<img style="width: 6rem; height: 6rem; border-radius: 50px;"
src="/images/users/icons/{{ Auth::user()->icon_path }}">
<br><br>
<span style="color: white;">{{ Auth::user()->name }}</span>
</div>
@foreach($Menus as $menu)
<div id="linkContainer" class="linkContainer" style="padding: 0.3rem;">
<a style="text-decoration: none; color: white; padding-left: 0.3rem;" href="/{{ $menu->slug }}">{!!
$menu->icon_path !!} {{ $menu->name }}</a>
</div>
@endforeach
<div id="linkContainer" class="linkContainer" style="padding: 0.3rem;">
<a style="text-decoration: none; color: white; padding-left: 0.3rem;" href="{{ route('logout') }}"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();"><i
class="fas fa-sign-out-alt"></i> Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@CSRF
</form>
</div>
<br><br>
</div>JavaScript
<script type="text/javascript">
$(function(){
$("#linkContainer:nth-child(odd)").css('background-color', '#222');
});
$("#menuToggle").click(function(){
$("#sidebarContainer").animate({"left": "0px"});
});
</script>任何帮助都将不胜感激，谢谢:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-15 02:27:11
您引用的是div，但是sidebarContainer只有sidebarContainer类。我更新了代码，以便也将单击放在您的函数调用中。
<script type="text/javascript">
$(function(){
$("#linkContainer:nth-child(odd)").css('background-color', '#222');
$("#menuToggle").click(function(){
$(".sidebarContainer").animate({"left": "0px"});
});
});
</script>另一方面，您最有可能在此循环中复制IDS，并且in应该是唯一的：
@foreach($Menus as $menu)
<div id="linkContainer" class="linkContainer" style="padding: 0.3rem;">Stack Overflow用户
发布于 2019-02-15 02:40:35
确保sideContainerbar位于css中，并且可能在css中也有left属性的值。left属性仅适用于定位的元素。(相对或绝对)，也可以包括相对于要作为参数提供给animate函数的对象的位置。#干杯
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54696730
复制相关文章
相似问题
腾讯云开发者
