{"id":612,"date":"2011-07-19T17:48:59","date_gmt":"2011-07-19T15:48:59","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=612"},"modified":"2011-08-08T17:52:28","modified_gmt":"2011-08-08T15:52:28","slug":"effet-highlight-un-element-avec-jquery-javascript","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2011\/07\/19\/effet-highlight-un-element-avec-jquery-javascript\/","title":{"rendered":"Simple effet highlight sur un element avec jQuery [javascript]"},"content":{"rendered":"<p>[niveau: interm\u00e9diaire]<\/p>\n<p>Si vous souhaitez cr\u00e9er un effet  highlight sur un \u00e9l\u00e9ment (en passant le background en jaune par exemple), voici comment il faut s&#8217;y prendre :<\/p>\n<div class=\"code script\">\n<pre class=\"js\">\r\njQuery.prototype.highlight = function() { \r\n  jQuery(this).css(\"background-color\",\"yellow\").fadeTo('slow', 0.1, function() {\r\n    jQuery(this).fadeTo('slow', 1.0, function() {\r\n      jQuery(this).css(\"background-color\",\"white\");\r\n    });\r\n  });\r\n};\r\n\r\njQuery('#mon-element').highlight();\r\n<\/pre>\n<\/div>\n<p><script>\njQuery.prototype.highlight = function() { \n  jQuery(this).css(\"background-color\",\"yellow\").fadeTo('slow', 0.1, function() {\n    jQuery(this).fadeTo('slow', 1.0, function() {\n      jQuery(this).css(\"background-color\",\"white\");\n    });\n  });\n};\n<\/script><\/p>\n<div style=\"display:none\">\nA tester ici :<\/p>\n<div>\n<table border=\"1\">\n<tr>\n<td colspan=\"2\">Hello, I&#8217;m an example<\/td>\n<td><a href=\"#nogo\" onclick=\"jQuery(this).closest('tr').find('td').highlight()\">Highlight<\/a><\/td>\n<\/tr>\n<tr>\n<td>Total<\/td>\n<td>31337<\/td>\n<td><a href=\"#nogo\" onclick=\"jQuery(this).closest('tr').find('td').highlight()\">Highlight<\/a><\/td>\n<\/tr>\n<\/table>\n<p>Ceci est pour le test. <a href=\"#nogo\" onclick=\"jQuery(this).parent().highlight()\">Highlight<\/a><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>[niveau: interm\u00e9diaire] Si vous souhaitez cr\u00e9er un effet highlight sur un \u00e9l\u00e9ment (en passant le background en jaune par exemple), voici comment il faut s&#8217;y prendre : jQuery.prototype.highlight = function() { jQuery(this).css(&#8220;background-color&#8221;,&#8221;yellow&#8221;).fadeTo(&#8216;slow&#8217;, 0.1, function() { jQuery(this).fadeTo(&#8216;slow&#8217;, 1.0, function() { jQuery(this).css(&#8220;background-color&#8221;,&#8221;white&#8221;); }); }); }; jQuery(&#8216;#mon-element&#8217;).highlight(); A tester ici : Hello, I&#8217;m an example Highlight Total 31337 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[13,33,26],"tags":[24,111,152,158],"class_list":["post-612","post","type-post","status-publish","format-standard","hentry","category-niveau-intermediaire","category-programmation","category-web-design","tag-javascript","tag-jquery","tag-niveau-intermediaire","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=612"}],"version-history":[{"count":19,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/612\/revisions"}],"predecessor-version":[{"id":668,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/612\/revisions\/668"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}