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/

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

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

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

如果你有兴趣，可以去读一下：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变量中。

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

先把这些网址记录下来，已被将来使用：

1. http://www.pengoworks.com/workshop/jquery/autocomplete.htm ：不过界面土了点。
2. http://www.dyve.net/jquery/?autocomplete UI挺不错，准备先试用这个。
3. http://plugins.jquery.com/project/jqac 这个官方网站Plugin中。
4. http://plugins.jquery.com/project/jq-autocomplete 奇怪的是官网还有另一个，晕。

不过都没使用过，有空我会再试用一下。不过中文输入法的问题，可能还有做一点修改。

TITLE : jQuery in Action (Paperback)
AUTHOR : Bear Bibeault (Author), Yehuda Katz (Author)
PUBLISHER : Manning Publications publisher
ISBN : 1933988355
EDITION : 1st
PUB DATE : February 15, 2008
LANGUAGE : English
DOWNLOAD :  emule

DESCRIPTION :

A good web development framework anticipates what you need to do and makes those tasks easier and more efficient; jQuery practically reads your mind. Developers of every stripe-hobbyists and professionals alike-fall in love with jQuery the minute they’ve reduced 20 lines of clunky JavaScript into three lines of elegant, readable code. This new, concise JavaScript library radically simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery in Action, like jQuery itself, is a concise tool designed to make you a more efficient and effective web developer. In a short 300 pages, this book introduces you to the jQuery programming model and guides you through the major features and techniques you’ll need to be productive immediately. The book anchors each new concept in the tasks you’ll tackle in day-to-day web development and offers unique lab pages where you immediately put your jQuery knowledge to work. There are dozens of JavaScript libraries available now, with major companies like Google, Yahoo and AOL open-sourcing their in-house tools. This book shows you how jQuery stacks up against other libraries and helps you navigate interaction with other tools and frameworks. jQuery in Action offers a rich investigation of the up-and-coming jQuery library for client-side JavaScript. This book covers all major features and capabilities in a manner focused on getting the reader up and running with jQuery from the very first sections. Web Developers reading this book will gain a deep understanding of how to use jQuery to simplify their pages and lives, as well as learn the philosophy behind writing jQuery-enhanced pages.

网站上有一些例子，不过还不是非常的详细，慢慢摸索中…。

1. 示例1

最简单的例子,

Javascript:

$(document).ready(function(){
     $("#tags").jTagging("#tag_list", " ");
}

其中输入input的Id是tags，候选内容id为tag_list

2. 示例2

$(document).ready(function(){
    var tag_list = new Array($("#tags_candidate1"), $("#tags_candidate2"));
    var normalClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#f00", backgroundColor : "" };
    var selectedClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#fff", backgroundColor : "#f00"};
    var normalHoverClass = { padding : "2px 1px 0 1px", textDecoration : "none", color : "#fff", backgroundColor : "#00f"};
    $("#tags").jTagging(tag_list, " ", normalClass, selectedClass, normalHoverClass);
}

其中tag_list为多个候选标签的id数组，normalClass, Select Class, normaHoverClass为自定义的CSS风格