{"id":318,"date":"2011-03-28T09:02:57","date_gmt":"2011-03-28T09:02:57","guid":{"rendered":"https:\/\/www.taywa.ch\/blog\/?p=318"},"modified":"2011-03-28T09:02:57","modified_gmt":"2011-03-28T09:02:57","slug":"jquery-fadein-animation-ie7-ie8-filter-cs","status":"publish","type":"post","link":"https:\/\/www.taywa.ch\/blog\/js\/jquery-fadein-animation-ie7-ie8-filter-cs\/","title":{"rendered":"jquery fadeIn Animation im IE7, IE8 hinterl\u00e4sst CSS Eigenschaft &#8222;filter&#8220;"},"content":{"rendered":"<p><strong>Problem: <\/strong>Die jQuery Funktion fadeIn() &#8211; oder Animationen welche die CSS Eigenschaft Opacity animieren &#8211;  hinterlassen in den inline Styles &#8222;filter:alpha(opacity=100)&#8220;. Dies kann ggf. Probleme mit dem Text rendering (Text wird ohne antialiasing dargestellt) oder mit Block-Elementen verursachen, die ausserhalb des animierten Nodes liegen (overflow:visible;) schafft leider keine abhilfe.<\/p>\n<p><strong>L\u00f6sung: <\/strong>Im Callbacknach der jQuery Animation den Filter aus den inline-Styles l\u00f6schen:<\/p>\n<div class=\"javascript dean_ch\"><span class=\"coMULTI\">\/*#MyAnimatedNode ersetzen mit dem Selektor der Animation*\/<\/span><br \/>\n<span class=\"kw1\">if<\/span><span class=\"br0\">&#40;<\/span>$.<span class=\"me1\">browser<\/span>.<span class=\"me1\">msie<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><\/p>\n<p>&nbsp; $<span class=\"br0\">&#40;<\/span><span class=\"st0\">&#8218;#MyAnimatedNode&#8216;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">css<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&#8218;filter&#8216;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&#8220;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">;<\/span><\/p>\n<p><span class=\"br0\">&#125;<\/span><\/div>\n<p>Leider kann es nun zu Problemen mit transparenten PNG&#8217;s in Childnodes geben. Ggf. muss hierf\u00fcr in einer Hierarchiestufe dazwischen die filter Eigenschaft wieder hinzugef\u00fcgt werden.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Problem: Die jQuery Funktion fadeIn() &#8211; oder Animationen welche die CSS Eigenschaft Opacity animieren &#8211; hinterlassen in den inline Styles &#8222;filter:alpha(opacity=100)&#8220;. Dies kann ggf. Probleme mit dem Text rendering (Text wird ohne antialiasing dargestellt) oder mit Block-Elementen verursachen, die ausserhalb des animierten Nodes liegen (overflow:visible;) schafft leider keine abhilfe. L\u00f6sung: Im Callbacknach der jQuery Animation<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,9],"tags":[184,183,46],"class_list":["post-318","post","type-post","status-publish","format-standard","hentry","category-css","category-js","tag-css","tag-js","tag-jquery"],"_links":{"self":[{"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/posts\/318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/comments?post=318"}],"version-history":[{"count":4,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/posts\/318\/revisions"}],"predecessor-version":[{"id":322,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/posts\/318\/revisions\/322"}],"wp:attachment":[{"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/media?parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/categories?post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/tags?post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}