CODEWITHSUNDEEP
javascriptjqueryhtml
Universal Link
Universal Link

Reputation: 307

JQuery animate() isn't animating

I want to animate a sidebar to come onto the screen once the user has clicked the menu toggle button.

There are no errors in the console, and it is definitely firing when the menu button is clicked as I put an alert() function there which does execute. Despite this, the sidebar doesn't ever appear on the screen.

Here's the code:

Sidebar

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

Any help would be appreciated thanks :)

Upvotes: 0

Views: 49

Answers (2)

Monday A Victor
Monday A Victor

Reputation: 471

Make sure the sideContainerbar is positioned in your css and probably has a value for left property also in you css. The left property only works on positioned elements. (Relative or absolute), or you can include the position relative to the object you are supplying as argument to the animate function. #cheers

Upvotes: 0

imvain2
imvain2

Reputation: 15847

You are referring to the sidebarContainer ID, but the div only has the sidebarContainer class. I updated the code to also put the click within your function call.

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


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

});
</script>

on a different note you are most likely duplicating IDS in this loop and IDs are meant to be unique:

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

Upvotes: 1

Related Questions