我正在尝试模拟 ThemeForest 上管理模板中常见的侧面板类型。
简单地说，有一个左侧菜单，单击按钮时，将在 200 像素和 50 像素之间切换。在 50 像素处悬停在面板上时，将其扩展回 200 像素。
有两个隐藏的右侧面板，单击相关按钮即可显示或隐藏。当一个打开时，另一个会自动关闭。
一切正常，但有一个障碍。因为我是通过使用 jQuery 切换类来完成此操作的，所以我没有考虑到您不能为这些类设置动画。我已经尝试过显示/隐藏、slideToggle 等操作，但这总是会向元素添加“disply:block”，因此它无法正确显示。
任何人都可以建议我可以做些什么来让面板顺利显示而不是仅仅显示吗？即使这意味着改变我迄今为止所做的一切!
http://jsfiddle.net/f67rdxd5/1/ 处有一个 fiddle 完整代码如下。
在此先感谢您的帮助。
史蒂夫
CSS
/* Top Navigation -------------------------------------------*/
.top-menu {
height: 36px;
background-color: #333333;
font-family: Oswald;
font-size: 14px;
color: #ffffff;
text-decoration: none;
}
}
/* Header ---------------------------------------------------*/
header {
background-color: #efefef;
}
/* main-content Navbar ----------------------------------------------*/
.navbar {
margin-bottom: 0;
}
/* Sidebar */
aside.fixed {
position: fixed;
}
.sidebar {
background: #58595b;
z-index: 99;
}
.left-sidebar, .menu-closed .left-sidebar.hover {
width: 200px;
float: left;
position: absolute;
left: 0;
height: 100%;
overflow: visible!important;
}
.menu-closed .left-sidebar {
width: 60px;
}
header {
z-index: 2;
min-height: 30px;
padding: 10px 21px;
background: #fafafa;
border-bottom: 1px solid #e0e0e0;
}
#main-content {
background: #f9f9f9;
padding-top: 15px;
height: 100%;
min-height: 900px;
padding-left : 200px;
}
.menu-closed #main-content {
padding-left: 60px;
}
.titlebar {
height: 20px;
}
.container {
width: 100%;
}
.chat-sidebar.closed, .settings-sidebar.closed {
display: none;
}
.chat-sidebar.open, .settings-sidebar.open {
overflow: hidden;
position: absolute;
top: 36px;
bottom: 0;
right: 250px;
width: 250px;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
border-left: 1px solid #eee;
box-shadow: 1px 0 1px rgba(0, 0, 0, .1);
padding: 15px 20px;
}
HTML
<body id="">
<!-- Outer Wrapper to set layout width -->
<div id="outerWrapper">
<!-- Top Navigation Bar -->
<div class="top-menu">
<button id="left-toggle" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
</button>
<button id="chat-toggle" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
</button>
<button id="settings-toggle" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</button>
</div>
<!-- .topNav -->
<div id="main-wrapper" class="menu-open">
<!-- Left Sidebar -->
<aside class="sidebar left-sidebar">
<h4>Left menu</h4>
</aside>
<!-- /.left-sidebar -->
<div id="main-content">
<!-- Header -->
<header>
<div class="titlebar">PHP/MYSQL SERVER EXAMPLE</div>
</header>
<!-- .Header -->
<!-- Main Panel -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content-panel">
<div class="content-panel-header">
<h4>Text Content.</h4>
</div>
<!-- /.content-panel-header -->
<!-- Content Area -->ytuyutyutyuytuyt
<!-- End Content Area -->
</div>
<!-- /.main-content -->
</div>
<!-- /.col-md-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /#main-content -->
<!-- Right Sidebar -->
<aside class="sidebar chat-sidebar closed">
<h3>Chat</h3>
</aside>
<aside class="sidebar settings-sidebar closed">
<h3>Settings</h3>
</aside>
<!-- /.right-sidebar -->
</div>
<!-- /#main-wrapper -->
<!-- jQuery and other plugins -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Sitewide Scripts -->
<script src="js/global.js"></script>
<!-- Page Level Scripts -->
</body>
jQuery
/*----- Open and close the side Menus ------*/
/*----- The left menu is controlled by ------*/
/*----- switching the main-wrapper div ------*/
/*----- classes between menu-open and ------*/
/*----- menu-closed ------*/
$('#left-toggle').click(function (event) {
$("#main-wrapper").toggleClass('menu-open menu-closed');
return false;
})
//If the left menu is closed, open it when hovered over
$('.left-sidebar').hover(
function () {
$(".left-sidebar").addClass('hover')
},
function () {
$(".left-sidebar").removeClass('hover')
})
/*----- The right menus are controlled ------*/
/*----- by switching the classes ------*/
/*----- between open and closed on ------*/
/*----- each of the right side menus ------*/
//If the chat button is clicked, add open to
//Chat sidebar and closed to all others
$('#chat-toggle').click(function (event) {
$(".chat-sidebar").toggleClass('open closed');
$(".settings-sidebar").removeClass('open').addClass('closed');
return false;
})
//If the settings button is clicked, add open to
//Settings sidebar and closed to all others
$('#settings-toggle').click(function (event) {
$(".settings-sidebar").toggleClass('open closed');
$(".chat-sidebar").removeClass('open').addClass('closed');
return false;
})
最佳答案
您可以使用 CSS 过渡或动画。 这是一个链接，告诉您如何进行 css 转换。 http://css-tricks.com/almanac/properties/t/transition/
这是一个简单的 jsfiddle，它使用 css transition 来工作。
$(document).ready(function(){
$('.Side-bar').click(function(){
if($('.Side-bar').hasClass('close')){
$('.Side-bar').addClass('open');
$('.Side-bar').removeClass('close');
}else{
$('.Side-bar').addClass('close');
$('.Side-bar').removeClass('open');
}
});
});
.Side-bar{
background-color: grey;
height: 500px;
}
.close{
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
width: 30px;
}
.open{
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
width: 100px;
}
关于jquery - 动画滑入式面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27992731/