jquery chuyển trang trình bày từ trái sang phải và quay lại

Question

Tôi có nút "Menu" ở bên tay trái của trang và khi được chọn, tôi có một div chứa các mục menu hiển thị. Sau đó tôi có một nút khác có thể được chọn để ẩn menu.

Lý tưởng nhất là tôi muốn điều này trượt ra (từ trái sang phải) và ngược lại nhưng không thành công trong việc làm việc này tốt. Tôi đã thử sử dụng animate và SlideToggle nhưng không ai làm việc tốt cho những gì tôi có. Có lời khuyên nào không?

<div id="cat_icon">Menu</div> 
<div id="categories"> 
    <div CLASS="panel_title">Menu</div> 
    <div CLASS="panel_item"> 
     <template:UserControl id="ucCategories" src="UserControls/ProductCategories.ascx" /> 
    </div> 
</div> 

$('#cat_icon').click(function() { 
    $('#categories').toggle(); 
    $('#cat_icon').hide(); 
}); 
$('.panel_title').click(function() { 
    $('#categories').toggle(); 
    $('#cat_icon').show(); 
}); 

Answer 1

Xem này: Demo

$('#cat_icon,.panel_title').click(function() { 
    $('#categories,#cat_icon').stop().slideToggle('slow'); 
}); 

Cập nhật: Để trượt từ trái sang phải: Demo2

Note: Second ai sử dụng jquery-ui cũng

Answer 2

Sử dụng này ...

$('#cat_icon').click(function() { 
    $('#categories').toggle("slow"); 
    //$('#cat_icon').hide(); 
}); 
$('.panel_title').click(function() { 
    $('#categories').toggle("slow"); 
    //$('#cat_icon').show(); 
}); 

Xem này Example

Greetings.

Answer 3

Ẩn #categories ban đầu

#categories { 
    display: none; 
} 

và sau đó, sử dụng JQuery UI, animate Menu chậm

var duration = 'slow'; 

$('#cat_icon').click(function() { 
    $('#cat_icon').hide(duration, function() { 
     $('#categories').show('slide', {direction: 'left'}, duration);}); 
}); 
$('.panel_title').click(function() { 
    $('#categories').hide('slide', {direction: 'left'}, duration, function() { 
     $('#cat_icon').show(duration);}); 
}); 

JSFiddle

Bạn có thể sử dụng bất kỳ thời gian trong mili giây cũng

var duration = 2000; 

Nếu bạn muốn ẩn trên class='panel_item' quá, chọn cả hai panel_title và panel_item

$('.panel_title,.panel_item').click(function() { 
    $('#categories').hide('slide', {direction: 'left'}, duration, function() { 
     $('#cat_icon').show(duration);}); 
}); 

JSFiddle

Answer 4

trượt từ quyền:

$('#example').animate({width:'toggle'},350); 

trượt sang trái:

$('#example').toggle({ direction: "left" }, 1000);