Jquery
Résolu
soufianederteufel
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
soufianederteufel Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
soufianederteufel Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
salut tout le monde
je veux bien savoir comment faire animé un <input type="text" /> comme l'animation du champ de recherche ki se trouve dans ce site web https://baclibre.ma/ .
quand on click sur le champ de recherche celle la grandit et quand on click on dehors de ce dernier le champ prend sa form du debut .
et merci d'avance ^^
je veux bien savoir comment faire animé un <input type="text" /> comme l'animation du champ de recherche ki se trouve dans ce site web https://baclibre.ma/ .
quand on click sur le champ de recherche celle la grandit et quand on click on dehors de ce dernier le champ prend sa form du debut .
et merci d'avance ^^
3 réponses
-
Salut
c est effectibement avec animate() que cela ce fait
voila un exemplefunction change_width(){ $input_node = jQuery('#form input[type="text"]'); /* tu met l id de ta form */ $input_node.focus(function(){ jQuery(this).stop(true,true).animate({ width:'250px' },100); }); $input_node.blur(function(){ jQuery(this).stop(true,true).animate({ width:'150px' },100); }) } change_width();
exemple fonctionel avec ce code
!<!DOCTYPE html> <html> <head> <title> RAD ZONE Webcreation </title> <meta charset="utf-8"> </head> <body> <form id="recherche" name="recherche"><!-- id de la form a reporter dans la fonction js --> <input name="texte" type="text"><!-- type="text" sera a reporter dans la fonction js--> </form> <script src="http://code.jquery.com/jquery-latest.js"> </script> <script> function change_width(){ $input_node = jQuery('#recherche input[type="text"]'); /* tu met l id de ta form et type="text" pour cibler cet imput */ $input_node.focus(function(){ jQuery(this).stop(true,true).animate({ width:'250px' /* grand width*/ },1000); /* Vitesse en milisecondes */ }); $input_node.blur(function(){ jQuery(this).stop(true,true).animate({ width:'150px' /* petit width*/ },1000);/* Vitesse en milisecondes */ }) } change_width(); </script> </body> </html>
a+
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣ -
Il faut essentiellement utiliser la fonction
animate()
de jQuery.
Je ne suis pas trop familier mais tu peux t'attaquer à la documentation (en anglais seulement):
https://api.jquery.com/animate/
Il y a plein d'exemple de code et des résultats.
Un petit bout de code fait par BassemDy sur StackOverflow:
http://jsfiddle.net/DKjKP/1/
(Ref: https://stackoverflow.com/questions/7296955/jquery-animating-div-resize-on-click )
Je suis sur que tu peux trouver de l'aide en français aussi.
Bonne chance!
-
bien merci rad zone sa a fonctionner aprés un petit peu de modification mais a fonctionnée merci trop ^^
