jquery的fadeIn和fadeOut – 千丝海阁

首页 » Javascript » jquery的fadeIn和fadeOut

jquery的fadeIn和fadeOut

2271 7

或许你没有听过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');
}
文章评分1次,平均分5.0

本文原始地址:https://www.tiandiyoyo.com/2014/04/fadein_fadeout_of_jq/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


7 Comments

  1. 不知道JQuery内部的实现可能很容易出现这种意外情况。好吧,其实我就没接触过Jquery,瞎说的。

  2. tlms3 :

    感觉效果不错。。很详细

  3. 楼主你好,楼下再见,我来无影去无踪

  4. Era :

    嗯,这个效果还是不错的。

  5. mooc :

    感觉效果不错。。很详细,点个赞哈哈

  6. 让我试试手机回复评论

  7. 写的不错(一时间脑子里只剩下这些文字了)……可以也了解下fadeTo……

载入分页评论...