{"id":416,"date":"2022-08-30T15:00:59","date_gmt":"2022-08-30T15:00:59","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/rewrite-jquery-fadein-to-use-css3-transitions-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:00:59","modified_gmt":"2022-08-30T15:00:59","slug":"rewrite-jquery-fadein-to-use-css3-transitions-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/rewrite-jquery-fadein-to-use-css3-transitions-collection-of-common-programming-errors\/","title":{"rendered":"Rewrite Jquery fadeIn() to use CSS3 transitions-Collection of common programming errors"},"content":{"rendered":"<p>If you want to replace jQuery&#8217;s fadeIn and fadeOut functions with jQuery Transit, you could do something like this:<\/p>\n<pre><code>$.fn.fadeOut = function(speed, callback)\n{\n    var transitionSpeed = typeof (speed) == \"undefined\" ? 1000 : speed;    \n    $(this).transition({opacity: 0 }, transitionSpeed, callback);\n\n};\n\n$.fn.fadeIn = function(speed, callback)\n{\n    var transitionSpeed = typeof (speed) == \"undefined\" ? 1000 : speed;    \n    $(this).transition({opacity: 1 }, transitionSpeed, callback);\n\n};\n\n$(\"div\").on(\"click\", function () \n{\n    \/\/Fade out for 4 seconds, then fade in for 6 seconds\n    $(this).fadeOut(4000, myCallBackFunction);\n});\n\nfunction myCallBackFunction () \n{\n        $(this).fadeIn(6000);\n\n}\n<\/code><\/pre>\n<h2>JS Fiddle Demo<\/h2>\n<p>It&#8217;s not perfect, but you can tweak it to your liking.<\/p>\n<p id=\"rop\"><small>Originally posted 2013-11-09 19:11:50. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>If you want to replace jQuery&#8217;s fadeIn and fadeOut functions with jQuery Transit, you could do something like this: $.fn.fadeOut = function(speed, callback) { var transitionSpeed = typeof (speed) == &#8220;undefined&#8221; ? 1000 : speed; $(this).transition({opacity: 0 }, transitionSpeed, callback); }; $.fn.fadeIn = function(speed, callback) { var transitionSpeed = typeof (speed) == &#8220;undefined&#8221; ? 1000 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-416","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/416\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}