千丝海阁

或许你没有听过fadeIn和fadeOut这两个函数，但是tiandi相信作为wper的你肯定有用过。这两个函数分别执行淡入淡出的效果，比如wp的ajax评论提交的时候。

今天在做天地团里一个搜索需求时用到这两个东西，需求内容是点击一个按钮，然后页面上需要淡入一个带有input框的搜索层，然后在此点击这个按钮时，这个层再做淡出效果。这两个函数，都有2个参数，第一个参数为时间，即动画时长，第二个参数为callback，即动画完成后执行的内容.

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

参数 描述

speed

可选。规定元素从隐藏到可见的速度。默认为 “normal”。

可能的值：

毫秒 （比如 1500）

“slow”

“normal”

“fast”

在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。

callback

可选。fadeIn 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

可能有一部分人会直接上以下代码来执行淡入的效果，但是。。。

str = $("#abc");
$("#content").append(str);
str.fadeIn('1000');

你会发现，压根木有效果，你不禁要问为虾米了。因为元素默认是显示的，需要先隐藏它才行，于是改成了下面的，O了。但是你又会发现。。。

str = $("#abc").hide();
$("#content").append(str);
str.fadeIn('1000');

再次点击那个链接，又会添加了一个相同的层，因为没有存在感判定，所以会不停地刷存在了，加个判定吧。

obj = document.getElementById("abc");  //当然这里也可以用jquery，但是jquery来判定元素是否存在。。。别扭啊。
if(!obj) {
    str = $("#abc").hide();
    $("#content").append(str);
    str.fadeIn('1000');
}

好了，前半部分淡入的效果好了，接下来摆弄在再次点击淡出的效果，于是代码又追加了两行，但是。。。

obj = document.getElementById("abc"); 
if(!obj) {
    str = $("#abc").hide();
    $("#content").append(str);
    str.fadeIn('1000');
}
else 
    $("#abc").fadeOut('1000');

点一下链接，淡入，再点一下淡出，再点。。。木有反应了，因为obj.fadeIn的时候，还是存在的，只是不可见而已，所以调整代码吧，追加callback，让淡出后，执行删除元素的操作。好了，元素是能再次生成了，但是淡出的效果木有了，无节操的remove把效果给吃掉了。

obj = document.getElementById("abc");  
if(!obj) {
    str = $("#abc").hide();
    $("#content").append(str);
    str.fadeIn('1000');
}
else 
    $("#abc").fadeOut('1000',$("#abc").remove());

最终版本调整为：

obj = document.getElementById("abc");  
if(!obj) {
    str = $("#abc").hide();
    $("#content").append(str);
    str.fadeIn('1000');
}
else if($("#abc").is(":hidden")) {
    $("#abc").fadeIn('1000');
}
else if($("#abc").is(":visible")){
    $("#abc").fadeOut('1000');
}

---