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 exemple
exemple fonctionel avec ce code
!
a+
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
c est effectibement avec animate() que cela ce fait
voila un exemple
function 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
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!
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!
