Comment implémenter un menu de navigation à effet flip personnalisé avec jQuery_jquery

L'exemple de cet article décrit comment jQuery implémente un menu de navigation à effet inversé personnalisé. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Copier le code Le code est le suivant :

var nummove=0;
var numout=0;
$(fonction(){
$("#btncell li").hover(
        fonction(){
Si(nummove==0)
            {
              nummove=1;
                $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){nummove=0;});
                $("a",this).animate({ height: "28px",top: "10px"}, 80);
               $("a",this).css("background","jaune");
>
            },
             fonction(){
Si(numout==0)
                {
              numout=1;
                $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){numout=0;});
                $("a",this).animate({ height: "28px",top: "10px"}, 80);
              $("a",this).css("background","#888");
              numout=0;
            }
            }
)
$("#btncell li a").click(function(){
​​​​ $(this).parents("li").css("z-index","2")
$(this).animate({ hauteur : "558px", haut : "-255px", largeur : "1000px", gauche : "-460px", opacité : 'toggle', lineHeight : '558px', fontSize : '500px '}, 1000);
$(this).animate({ hauteur : "28px", haut : "10px", largeur : "50px", gauche : "25px", opacité : 'toggle',lineHeight : '28px',fontSize : '12px'} , 400);
​​​​ $(this).parents("li").css("z-index","1")
})
})



Lors de la prévisualisation de l'effet, une erreur s'affichera dans le coin inférieur gauche et l'effet ne sera pas visible. Vous pourrez voir l'effet après l'actualisation.

• 1


• 2


• 3


• 4


• 5


• 6

J'espère que cet article sera utile à la programmation jQuery de chacun.