{"id":726,"date":"2013-05-23T10:54:46","date_gmt":"2013-05-23T09:54:46","guid":{"rendered":"http:\/\/www.bocciolesi.fr\/tutoriels-et-cours\/?p=726"},"modified":"2017-02-24T14:57:27","modified_gmt":"2017-02-24T13:57:27","slug":"jquery-les-effets","status":"publish","type":"post","link":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/","title":{"rendered":"JQUERY – Les effets"},"content":{"rendered":"
\"image_pdf\"Enregistrer en PDF<\/span><\/a><\/a><\/div>

I\u25ba Dans cet article, nous allons voir les effets d’animation que propose la biblioth\u00e8que JQuery par d\u00e9faut :<\/strong><\/span><\/p>\n

    \n
  1. animate (css, callBack, vitesse)
    \n<\/span><\/strong>
    \nCette\u00a0m\u00e9thode permet de cr\u00e9er ses\u00a0propres\u00a0animations en utilisant les propri\u00e9t\u00e9s CSS
    \nExemple :
    \n$(‘#boite’).animate<\/strong>({\u00a0<\/span>backgroundColor: ‘#aa0000’,\u00a0<\/span>color: ‘#fff’,\u00a0<\/span>width: 500, \u00a0<\/span><\/span><\/span>height:150}, 1000<\/span> );<\/span>
    \nL’option vitesse est \u00e9valu\u00e9e en ms ou avec les attributs : ‘slow’ ‘normal’ ‘fast’
    \nLe callBack permet d’appeler une fonction en fin d’animation<\/span><\/span><\/span><\/span><\/span><\/span>    \"Capture\"<\/a>Ce qui donne :\"Capture2\"<\/a><\/li>\n
  2. fadeIn (vitesse, callBack) | fadeOut\u00a0(vitesse, callBack)
    \n<\/strong><\/span><\/strong>
    \nCette m\u00e9thode permet de faire appara\u00eetre ou dispara\u00eetre progressivement\u00a0l’\u00e9l\u00e9ment
    \nCallBack permet\u00a0d\u2019ex\u00e9cuter\u00a0une fonction en fin d’animation<\/li>\n
  3. fadeTo\u00a0(vitesse, opacit\u00e9, callBack)
    \n<\/span>
    \n<\/strong>Comme fadeIn et fadeOut mais on peut r\u00e9gler le degr\u00e9 d’opacit\u00e9 entre 0 et 1<\/li>\n
  4. hide (vitesse, callBack) | \u00a0hide (vitesse, callBack)
    \n<\/span><\/strong>
    \nRejoint quelque part fadeIn et fadeOut mais \u00e0 la diff\u00e9rence que la hauteur et la largeur de l’\u00e9l\u00e9ment sont progressivement diminu\u00e9s jusqu’\u00e0 dispara\u00eetre
    \nLe r\u00e9sultat est\u00a0comme\u00a0pour les fadexxx, on obtient un display:none<\/li>\n
  5. slideUp (vitesse, callback) | slideDown(vitesse, callBack) | slideToggle(vitesse, callBack)
    \n<\/span><\/strong>
    \nSlideUp cache l’\u00e9l\u00e9ment selon un axe vertical
    \nSlideDown affiche l’\u00e9l\u00e9ment masqu\u00e9 selon un axe vertical
    \nSlideToggle est une version altern\u00e9e de slideDown et slideUp<\/li>\n<\/ol>\n

    Vous pourrez voir et tester les effets ici :\u00a0https:\/\/www.mb-creation-web.fr\/tutoriel-jquery\/les-effets-jquery.html<\/a><\/p>\n

    Michel BOCCIOLESI<\/em><\/p>\n

    \u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

    I\u25ba Dans cet article, nous allons voir les effets d’animation que propose la biblioth\u00e8que JQuery par d\u00e9faut : animate (css, callBack, vitesse) Cette\u00a0m\u00e9thode permet de cr\u00e9er ses\u00a0propres\u00a0animations en …<\/p>\n","protected":false},"author":1,"featured_media":1626,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,33,39],"tags":[],"class_list":["post-726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpement-web","category-jquery","category-tutoriels"],"yoast_head":"\nJQUERY - Les effets - Tutoriels et Cours<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JQUERY - Les effets - Tutoriels et Cours\" \/>\n<meta property=\"og:description\" content=\"I\u25ba Dans cet article, nous allons voir les effets d’animation que propose la biblioth\u00e8que JQuery par d\u00e9faut : animate (css, callBack, vitesse) Cette\u00a0m\u00e9thode permet de cr\u00e9er ses\u00a0propres\u00a0animations en ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutoriels et Cours\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-23T09:54:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-02-24T13:57:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/07\/html-3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"767\" \/>\n\t<meta property=\"og:image:height\" content=\"379\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michel BOCCIOLESI\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michel BOCCIOLESI\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/\",\"url\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/\",\"name\":\"JQUERY - Les effets - Tutoriels et Cours\",\"isPartOf\":{\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/07\/html-3.jpg\",\"datePublished\":\"2013-05-23T09:54:46+00:00\",\"dateModified\":\"2017-02-24T13:57:27+00:00\",\"author\":{\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#\/schema\/person\/6bdfe0a1263b803645c69e3d5748dabe\"},\"breadcrumb\":{\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/#primaryimage\",\"url\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/07\/html-3.jpg\",\"contentUrl\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/07\/html-3.jpg\",\"width\":767,\"height\":379,\"caption\":\"Tutoriels D\u00e9veloppement Web\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JQUERY – Les effets\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#website\",\"url\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/\",\"name\":\"Tutoriels et Cours\",\"description\":\"Michel Bocciolesi | Formateur Consultant en Informatique\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#\/schema\/person\/6bdfe0a1263b803645c69e3d5748dabe\",\"name\":\"Michel BOCCIOLESI\",\"description\":\"Michel Bocciolesi est consultant et formateur sp\u00e9cialis\u00e9 en Informatique.\",\"sameAs\":[\"https:\/\/www.mb-creation-web.fr\"],\"url\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/author\/michel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JQUERY - Les effets - Tutoriels et Cours","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/","og_locale":"fr_FR","og_type":"article","og_title":"JQUERY - Les effets - Tutoriels et Cours","og_description":"I\u25ba Dans cet article, nous allons voir les effets d’animation que propose la biblioth\u00e8que JQuery par d\u00e9faut : animate (css, callBack, vitesse) Cette\u00a0m\u00e9thode permet de cr\u00e9er ses\u00a0propres\u00a0animations en ...","og_url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/","og_site_name":"Tutoriels et Cours","article_published_time":"2013-05-23T09:54:46+00:00","article_modified_time":"2017-02-24T13:57:27+00:00","og_image":[{"width":767,"height":379,"url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/07\/html-3.jpg","type":"image\/jpeg"}],"author":"Michel BOCCIOLESI","twitter_misc":{"\u00c9crit par":"Michel BOCCIOLESI","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/","url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/","name":"JQUERY - Les effets - Tutoriels et Cours","isPartOf":{"@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/#primaryimage"},"image":{"@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/#primaryimage"},"thumbnailUrl":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/07\/html-3.jpg","datePublished":"2013-05-23T09:54:46+00:00","dateModified":"2017-02-24T13:57:27+00:00","author":{"@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#\/schema\/person\/6bdfe0a1263b803645c69e3d5748dabe"},"breadcrumb":{"@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/#primaryimage","url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/07\/html-3.jpg","contentUrl":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/07\/html-3.jpg","width":767,"height":379,"caption":"Tutoriels D\u00e9veloppement Web"},{"@type":"BreadcrumbList","@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/jquery-les-effets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/"},{"@type":"ListItem","position":2,"name":"JQUERY – Les effets"}]},{"@type":"WebSite","@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#website","url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/","name":"Tutoriels et Cours","description":"Michel Bocciolesi | Formateur Consultant en Informatique","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#\/schema\/person\/6bdfe0a1263b803645c69e3d5748dabe","name":"Michel BOCCIOLESI","description":"Michel Bocciolesi est consultant et formateur sp\u00e9cialis\u00e9 en Informatique.","sameAs":["https:\/\/www.mb-creation-web.fr"],"url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/author\/michel\/"}]}},"_links":{"self":[{"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/posts\/726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/comments?post=726"}],"version-history":[{"count":15,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/posts\/726\/revisions"}],"predecessor-version":[{"id":1669,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/posts\/726\/revisions\/1669"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/media\/1626"}],"wp:attachment":[{"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/media?parent=726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/categories?post=726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/tags?post=726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}