我希望在单击按钮时从浏览器的左边缘滑动面板,并在单击相同的按钮(切换)时隐藏面板.
CSS
.panel {
width:300px;
float:left;
height:550px;
background:#d9dada;
position:relative;
left:-300px;
}
.slider-arrow {
padding:5px;
width:10px;
float:left;
background:#d9dada;
font:400 12px Arial,Helvetica,sans-serif;
color:#000;
text-decoration:none;
position:relative;
left:-300px;
}
jQuery的
$(function(){
$('.slider-arrow.show').click(function(){
$( ".slider-arrow,.panel" ).animate({
left: "+=300"
},700,function() {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
});
$('.slider-arrow.hide').click(function(){
$( ".slider-arrow,.panel" ).animate({
left: "-=300"
},function() {
// Animation complete.
});
$(this).html('»').removeClass('hide').addClass('show');
});
});
它显示面板但不隐藏面板.使用选择器有任何问题吗?