天生我才必有用

I’ve noticed that when I use the jQuery .fadeIn() or .fade­Out() method I see ugly pix­e­lated text in Inter­net Explorer after the ani­ma­tion has com­pleted. This seems to be related to an issue with an IE spe­cific style fil­ter called clearType. To solve the prob­lem, you need to remove the clearType fil­ter after your jQuery ele­ment has faded in. There are a few ways to do this:

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/

NetTuts最新教材：

Build a Better Tooltip with jQuery Awesomeness

效果如下：

这篇博客介绍了25个关于下拉菜单的脚本，有空学习研究一下：

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

是不是觉得标准的HTML的Form看上去不是很舒服，今天看到一个Mootools做的Custom Form 非常的不错。http://customformelements.net/demopage.php。当然也去尝试找找是否有jQuery的类似控件，只找到了jNice Form (http://plugins.jquery.com/project/jNice)，不过和Mootools那套CSS的设计比起来可能还是差了一点。

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

这个jQuery的插件不错，主要实现的类似Delicious的标签推荐的功能，个人觉得这样的功能定义比原来这个jTagging使用起来更方便。

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

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

对于一个网站其实很多时候都需要对动态的生成所使用的CSS/JS，其中主要是CSS/JS中所包含的一些URL，当然这些URL信息也可以使用相对路径来实现，但在一些情况下使用相对路径并不能解决这个难题。

按照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中把输出内容进行压缩)。

今天看到一篇关于JQuery Plugin的教程写的非常不错。其实JQuery中最难的可能就是这部分，也没啥文档教程讲了非常的清楚。不过这篇教程讲的挺深入浅出的，例子也比较简单。

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

看到一篇用JQuery做的动画效果，现在才发现原来Flash最大对手不是Silverlight，其实是Javascript。
现在一次次看到Safari和Firefox的比拼，一次次看到最终促使js运行性能的提速的消息，不得不考虑这样的问题，实现这类简单的效果有必要使用Flash，毕竟js在下载文件大小上是绝对占有优势的。

此效果的链接地址.

JQuery 真的非常的强大，个人觉得主要功能还必须归结到它的Selector的设计上，非常的灵活，完完全全可以访问页面的任何内容。

今天又再次小试牛刀，看看如何使用简单的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变量中。

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

  var head = document.getElementsByTagName("head").item(0);
  var script = document.createElement ("script");
  script.src = "some_javascript_code.js";
  head.appendChild (script);

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