Das in jquery geschriebene Menü gleitet von links nach rechts und erscheint_jquery

/*Dies ist der Stil der Verknüpfungsschaltfläche unter Verwendung der CSS3-Attributschreibmethode, ohne Berücksichtigung von ie8-*/
.quick{
position:relative;
left:0; 🎜 >top:0;
width:100%;
height:32px;
background:-webkit-gradient(linear, left top, left down, from(#99f), to(#96f) ) ;
background:-webkit-linear-gradient(#99f, #96f);
background: -moz-linear-gradient(#99f, #96f); Farbverlauf (#99f, #9f);
Hintergrund: -o-linear-gradient(#99f, #96f);
Hintergrund: linear-gradient(#99f, #96f); Diese Seite ist das CSS der Navigation, */
.slideLeftMenu{
display:none
width:272px; ;
min-height:100%;
position:absolute;
z-index:3; 🎜>}
.slideLeftMenu .quick-toolbar,
.slideLeftMenu .list-item{
display:block;
width:100%;
height: 42px;
line-height:42px;
background:-webkit-gradient(linear, left top, left down, from(#444), to(#222)); linearer-gradient (#444, #222);
Hintergrund: -moz-linear-gradient(#444, #222);
Hintergrund: -ms-linear-gradient(#444, #222); 🎜>Hintergrund: -o-linear-gradient(#444, #222);
Hintergrund: linear-gradient(#444, #222);
.quick-toolbar .toolbar-title{
float:right;
margin-right:10px
.quick-toolbar .toolbar-delete{
float:left; 🎜>width:18px;
margin:11px 0 0 10px;background:url(images/icons-18-white.png) -73px -1px
border-radius :9px;}
.menuList .list-item-title{
float:left; #fff;
text-indent:0.75em;
border:solid 0px red; float:right ;
width:18px;
margin:11px 10px 0 0; 212121;
border-radius:9px
}/*Der CSS-Teil der Maske, die meisten davon werden mit absoluter Positionierung implementiert, da wir möchten, dass die Navigation reibungslos von der rechten Seite einfliegt*/
. masklayer{
display:none;
height:100%;
top:0; >background ; Verwenden Sie jq, um den Animationsteil zu verarbeiten, den folgenden Code




Kopieren Sie den Code


Der Code lautet wie folgt:


window.QuickPanel = { //Definieren Sie die globale Funktion
'isOpened': false,
'opened': function(){ //Definieren Sie die Methode zum Öffnen des Panels als Hintergrundebene und die Verknüpfungsschaltflächenebene beim Öffnen angeklickt wird, wird das Panel geschlossen. );
$quickpanel_toolbar.on("click" ,function (){
window.QuickPanel.closed();
});
$panel.css({ //Einfliegen vom rechts und verwenden Sie die absolute Positionierung, um
"width": "272px",
"top": "-6px",
"right": "-272px"
}).show() zu bedienen. .animate({"right":0"},function() {
window.QuickPanel.isOpened = true;
},
'closed': function(){ //Definieren Sie die Methode zum Schließen des Panels
$panel.css({" right":"0"}).show().animate({
"right":"-272px"
} ,function(){
$masklayer.fadeOut(); //So hat die gerade ausgeblendete Maske Probleme, wenn ich zu schnell klicke. . .
window.QuickPanel.isOpened = false;
$panel.hide(); //Das Menü ausblenden, nachdem die Animation beendet ist, sodass keine Bildlaufleiste vorhanden ist
}
} ;