jQuery animate（）没有动画

Question

一旦用户单击菜单切换按钮，我希望对侧边栏进行动画处理。

控制台中没有错误，单击菜单按钮时肯定会触发，因为我在其中放置了执行的alert()函数。 尽管如此，侧栏永远不会出现在屏幕上。

这是代码：

侧边栏

<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>

任何帮助，将不胜感激，谢谢:)

Answer 1

您指的是sidebarContainer ID，但div仅具有sidebarContainer类。 我更新了代码，将点击也放入了函数调用中。

<script type="text/javascript">
    $(function(){
        $("#linkContainer:nth-child(odd)").css('background-color', '#222');


    $("#menuToggle").click(function(){
        $(".sidebarContainer").animate({"left": "0px"});
    });

});
</script>

另一方面，您很可能在此循环中复制IDS，并且ID具有唯一性：

@foreach($Menus as $menu)
    <div id="linkContainer" class="linkContainer" style="padding: 0.3rem;">

Answer 2

确保sideContainerbar位于CSS中，并且可能在CSS中也具有left属性的值。 left属性仅适用于定位的元素。 （相对或绝对），也可以包含相对于要提供的对象的位置作为动画函数的参数。 ＃干杯