Maison > interface Web > js tutoriel > Méthode JQuery pour implémenter le mouvement de la souris pour afficher la couche de description de pictures_jquery

Méthode JQuery pour implémenter le mouvement de la souris pour afficher la couche de description de pictures_jquery

WBOY
Libérer: 2016-05-16 15:52:57
original
909 Les gens l'ont consulté

L'exemple de cet article décrit la méthode d'utilisation de JQuery pour afficher la couche de description des images lors du déplacement de la souris. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ceci peut être utilisé conjointement avec l'animation d'assouplissement JQuery.

Le code principal est le suivant :

$(".item").hover(
function()
{
//$(this).children("img").stop().animate({opacity: 0.8}, 700, "easeInSine");
$(this).children("div.title").stop().animate({top: 0}, 700, "easeOutBounce");
$(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce");
},
function(){
//$(this).children("img").stop().animate({opacity: 1}, 700);
$(this).children("div.title").stop().animate({top: -60}, 500);
$(this).children("div.desc").stop().animate({bottom: -40}, 400);
}
);

Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal