Pre­view / Sam­ple / Demonstration

3 Ways to Fix The Issue

1. Add a Back­ground Color

Set a back­ground color with CSS on the ele­ment that is fad­ing in or out. This is the most basic way to solve the problem.

2. Remove the clearType Filter

After fad­ing in an ele­ment you can add this sim­ple call­back func­tion to fix the bug.

1
2
3

$('#fadingElement').fadeIn(2000, function(){
    $(this).css('filter','');
});

3. Use a Cus­tom fadeIn/Out Method

This method serve’s as a replace­ment for the built-in fadeIn() & fade­Out() meth­ods for jQuery.
After you add this method to your JavaScript, change your ‘fade­Out’ to ‘cus­tom­Fade­Out’ and your ‘fadeIn’ to ‘cus­tom­FadeIn’. See a sam­ple of this method on the demo page. Thanks to Ben­jamin Novakovic for writ­ing this jQuery plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function($) {
	$.fn.customFadeIn = function(speed, callback) {
		$(this).fadeIn(speed, function() {
			if(jQuery.browser.msie)
				$(this).get(0).style.removeAttribute('filter');
			if(callback != undefined)
				callback();
		});
	};
	$.fn.customFadeOut = function(speed, callback) {
		$(this).fadeOut(speed, function() {
			if(jQuery.browser.msie)
				$(this).get(0).style.removeAttribute('filter');
			if(callback != undefined)
				callback();
		});
	};
})(jQuery);

Ugly Tran­si­tions on Ani­mated Elements

When you ani­mate any­thing in IE there is an ugly tran­si­tion effect that occurs before the fix is applied. There’s no way to pre­vent or fix clearType while the fade occurs. A work-around is to fade some­thing else, like a <div> on top that fades in, rather than your text content.

Advanced Sce­nar­ios

There are more IE related issues that peo­ple have men­tioned see­ing in advanced setups as well.

I found that the answer was to set the z-index. I have a stack of absolutely posi­tioned divs and wanted to fade between them. The only way I could get IE8 to han­dle the fades nicely was to set the z-index of the ele­ment to be faded in higher than the ele­ment to be faded out i.e.:

A demon­stra­tion for Al’s fix has been added to the demo page

原文出处：http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/

Build a Better Tooltip with jQuery Awesomeness

效果如下：

http://vandelaydesign.com/blog/tools/dropdown-navigation-menus/

挺迷惑的一点就是为何有这么多的Js的Framework，何时才能只需要选择一种就可以有所以的解决方案。

有兴趣可访问以下地址：http://remysharp.com/2007/12/28/jquery-tag-suggestion/

同时在此人博客中还找到了一个Text Box Hint的jQuery插件。其实前几天一直在找这个功能的插件，一直没找到。看来搜索的关键字也是一门学问啊。

按照Yahoo YSlow（http://developer.yahoo.com/yslow/help）的建议1，就是必须减少HTTP的请求，当然手动把所有代码合并是一种方法，但这种方法反而会带来两个更糟的问题，把所有CSS/JS都合并到一个文件中，当然不利于代码的阅读和管理。如果使用jQuery，因为不同的Plugin都是会放在不同的js文件中，和Yahoo YSlow的建议有较大的冲突，当然是用动态语言来合并这些js文件应该是个不错的idea。合并过程中还可以使用jsmin.php来进行js文件的压缩。

如想使用这个技术可参考以下的几篇说明：

1. Automatic merging and versioning of CSS/JS files with PHP
2. Adding JSMin to my CSS/JS merging script (这篇写了一般，其实有更好的方法来做)
3. GZip files with .htaccess and PHP (这篇是说明如何对输出的PHP内容进行GZip的压缩，因为动态文件无法使用Apache 的 GZIP的库来压缩，所以为了节省传递数据必须在PHP中把输出内容进行压缩)。

如果你有兴趣，可以去读一下：http://net.tutsplus.com/videos/screencasts/you-still-cant-create-a-jquery-plugin/

此效果的链接地址.

今天又再次小试牛刀，看看如何使用简单的JS语句来获得Radio Button的选择情况。

HTML 代码如下：

<inputtype=“radio” name=“type_choose” value=“1″ > Type1
<input type=“radio” name=“type_choose” value=“2″ checked=checked> Type 2

jQuery 代码如下：

var type = 0;
$("input[name='type_choose]").each(function (index){
    if (this.checked){
         type = this.value;
    }
});

我把radio button 的名称定义成了type_choose，jQuery的先定位到所有input标签，然后过滤只留下name等于type_choose的标签，其实也可以使用$(“input[type='radio']“)来找到radio button，不过这种缺点就是页面上只有一个radio button group，所以可能还是使用name更好些。

最后使用each函数来遍历找到的所有radio button，函数中的this就是radio button，如何他的checked属性为真，则表示用户选择了这个radio button，把这个radio button的值保存在type变量中。

整个算法还是挺紧凑简单的。

通过以上代码可以实现动态的javascript代码的载人。