Эффект перехода для боковой панели меню

Question

Я пытаюсь получить фиксированную панель меню, которая открывается по щелчку меню.

Он работает как ожидалось, теперь мне нужно применить эффект плавного перехода при его расширении/закрытии. И, оптимизируя код jquery, мой текущий код очень ручной, поэтому.

Вот скрипт, используемый

if ($(".sidebar").hasClass("sidebar_collapsed")) { 
    $("ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span").hide(); 
} 

$(".sidebar_list > li > a").click(function() { 
    $(".sidebar").removeClass("sidebar_collapsed"); 
    $(".sidebar > ul > li").removeClass("active"); 
    $(this).parent().addClass("active"); 
    $("ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span").show(); 
}); 

$(".close_sidebar, .home").click(function() { 
    $(this).addClass("active"); 
    $(".sidebar").addClass("sidebar_collapsed"); 
    $("ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span").hide(); 
}); 

DEMO

Answer 1

Добавление slow к вашему JQuery show и hide вызовет эффект перехода.

if ($(".sidebar").hasClass("sidebar_collapsed")) { 
    $("ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span").hide("slow"); 
} 

$(".sidebar_list > li > a").click(function() { 
    $(".sidebar").removeClass("sidebar_collapsed"); 
    $(".sidebar > ul > li").removeClass("active"); 
    $(this).parent().addClass("active"); 
    $("ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span").show("slow"); 
}); 

$(".close_sidebar, .home").click(function() { 
    $(this).addClass("active"); 
    $(".sidebar").addClass("sidebar_collapsed"); 
    $("ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span").hide("slow"); 
}); 

Также добавление CSS transition к вашей 'изменение ширины' даст небольшую анимацию тоже

.sidebar{ 
    background:#CBCAD8; 
    width:180px ; 
    color:#868695; 
    padding:10px 8px 0 0; 
    position:fixed; 
    left:0; 
    top:25px; 
    bottom:0; 
    transition: width .5s ease-in; 
} 

Вот это Fiddle

Answer 2

DEMO HERE

Также что-то с fadeIn и fadeOut вместо hide и show, как показано ниже:

$(".sidebar_list > li > a").click(function() { 
    $(".sidebar").removeClass("sidebar_collapsed"); 
    $(".sidebar > ul > li").removeClass("active"); 
    $(this).parent().addClass("active"); 
    $("ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span") 
    .fadeIn('slow'); //fadeIn the element 
}); 

$(".close_sidebar, .home").click(function() { 
    $(this).addClass("active"); 
    $("ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span").fadeOut('slow',function(){ 
     //after completing fadeOut add the class 
     $(".sidebar").addClass("sidebar_collapsed"); 
    }); 
}); 

Answer 3

Проверить эту скрипку demo. Вы можете сделать это, добавив и удалив класс анимации.

добавленный новый класс с анимацией sidebar_open.

Answer 4

Вы можете сделать что-то вроде этого

.sidebar { 
    -webkit-transition: width 0.5s linear; 
    -moz-transition: width 0.5s linear; 
    -o-transition: width 0.5s linear; 
    transition: width 0.5 linear; 
} 

После этого у вас есть только решить проблему с постоянными элементами изменения размеров ули.