jQuery Girl
  1. jQuery Girl
  3. Couvrir partiellement l’écran et faire glisser l’élément de superposition
Intereting Posts
Formulaire JQuery – Uncaught TypeError lors du téléchargement de fichier Comment écrire url dans une requête ajax dans codeigniter php? J’ai besoin de mettre à jour la valeur href à l’aide de jquery Script de chargement JQuery sur événement (cliquez) Evénement Fire OnAppend pour l’élément jQuery lorsqu’il est ajouté au DOM JavaScript: Comment détecter si une case HTML a été cochée? jQuery Uniform Checkbox ne vérifie pas (dés) Impossible d’obtenir le corps de réponse 401 La fonction de validation jQuery ne fonctionne pas bower ou grunt continue de supprimer jquery de index.html zclip ne fonctionne pas à l’intérieur de la table plugin de menu contextuel jquery – Où est le type d’événement clic droit? Comment rendre le lecteur vidéo personnalisé applicable à plusieurs vidéos? Est-il mauvais d’ouvrir plusieurs connexions de firebase database dans indexedDB? ASP.NET retournant JSON avec ASHX

Couvrir partiellement l’écran et faire glisser l’élément de superposition

J’essaie de créer une superposition-div, qui couvre tout l’écran – sauf 3em vers le bas. Je pense que ma tentative n’est pas l’optimum:

CSS: 

 #background { background-color: #ddd; width: 100%; height: 100%; } #overlay { position: absolute; height: 100%; background-color: #fff; width: 100%; top: -3em; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); z-index: 1; }

Avec cela, je veux glisser de haut en bas de la superposition. Mais avec les fichiers css ci-dessus, je ne sais pas comment animer complètement, car les “-55em” sont trop nombreux pour une résolution d’écran inférieure ou pas assez pour une résolution supérieure:

JS: 

 $('#overlay').animate({'top':'-55em'}, 1000, function() { $('#overlay').animate({'top':'-3em'}, 1000); });

Je pense que vous devriez changer de hauteur au lieu de haut, cela vous évitera des calculs typiques 

 $('#overlay').animate({'height':'0%'}, 1000, function() { $('#overlay').animate({'height':'100%'}, 1000); }); 
  #background { background-color: #ddd; width: 100%; height: 100%; } #overlay { position: absolute; height: 100%; background-color: #fff; width: 100%; top: -3em; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); z-index: 1; }