Jquery

Résolu/Fermé

soufianederteufel Messages postés 2 Date d'inscription jeudi 21 novembre 2013 Statut Membre Dernière intervention 21 novembre 2013 - 21 nov. 2013 à 15:59
soufianederteufel Messages postés 2 Date d'inscription jeudi 21 novembre 2013 Statut Membre Dernière intervention 21 novembre 2013 - 21 nov. 2013 à 20:31

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 ^^

A voir également:

Jquery
JQuery non interprété - Forum Wordpress
Jquery format date - Forum Webmastering
Jquery animate toggle ✓ - Forum Javascript
Probleme de cohabitation de jquery - Forum Javascript
Drag & drop JQuery ✓ - Forum Javascript

3 réponses

Réponse 1 / 3

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 21/11/2013 à 17:18

Salut
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. ♣

Réponse 2 / 3

Doctor C Messages postés 627 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 19 février 2016 398
21 nov. 2013 à 16:22

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!

Réponse 3 / 3

soufianederteufel Messages postés 2 Date d'inscription jeudi 21 novembre 2013 Statut Membre Dernière intervention 21 novembre 2013
21 nov. 2013 à 20:31

bien merci rad zone sa a fonctionner aprés un petit peu de modification mais a fonctionnée merci trop ^^

Discussions similaires

Redirection Jquery onclick

jQuery & Regex

jquery: refresh element enfant après ajax

Tampermonkey (userscript), JQuery & Vinted, help !

Problème de jquery sur mozilla

Discussions similaires

Newsletters