Search code examples
javascriptjqueryjquery-animatesliderights

jquery animate slide not working


This my code but not work if i put slide way inside variable.

just fade in and out working

$('.sidebar-toggle').on('click', function(){

    if( $('.sidebar-left').length > 0 ) {
        var SideWay = 'left';
        var Sidebar = $('.sidebar-left');
    } else {
        var SideWay = 'right';
        var Sidebar = $('.sidebar-right');
    }

    var SidebarWidth = Sidebar.css('width');

    if( Sidebar.css('display') == 'none' )
    {
        Sidebar.fadeIn('fast').animate({ SideWay : '0'}, 400);
    } else {
        Sidebar.stop().animate({ SideWay : '-' + SidebarWidth}, 500).fadeOut();
    }

});

Solution

  • try this

    $('.sidebar-toggle').on('click', function(){
    
        if( $('.sidebar-left').length > 0 ) {
            var SideWay = 'left';
            var Sidebar = $('.sidebar-left');
        } else {
            var SideWay = 'right';
            var Sidebar = $('.sidebar-right');
        }
        var animateIt = {};
        var SidebarWidth = Sidebar.css('width');
    
        if( Sidebar.css('display') == 'none' )
        {
            animateIt[SideWay] = '0';
            Sidebar.fadeIn('fast').animate( animateIt , 400);
        } else {
            animateIt[SideWay] = '-' + SidebarWidth;
            Sidebar.stop().animate( animateIt , 500).fadeOut();
        }
    
    });
    

    you can take a look at this Using a variable for a key in a JavaScript object literal

    while I don't know your full code this is just an Example of how it works