jQuery动态效果学习篇,元素的二种方法的相比较

CSS“隐藏”元素的二种方法的比较

2016/02/16 · CSS ·
隐藏

原稿出处:
狼狼的蓝胖子(@狼狼的蓝胖子)   

一说起CSS隐藏元素,我想大多数小伙伴们都会想到的第一种格局就是设置display为none。那是最为人所精晓也是最常用的不二法门。我相信还有过两个人想到利用安装visibility为hidden来隐藏元素,那种办法也是常用的方法,而且也有为数不少人精晓互相的不比。除了那两种办法,本文还计算了一部分相比较不常用的点子,相比了这三种“隐藏”元素方法的界别和优缺点,欢迎大家调换!!

材料来自

w3cschool

当transition遇上display

2016/01/13 · CSS · 5
评论 ·
display,
transition

初稿出处:
携程设计委员会   

信任我们在试用css3卡通时候势必用过transition属性,相对于js动画来说用起来更高效不难。
代码如下:
HTML结构:

XHTML

<div id=”box”></div> <button>动画按钮</button>

1
2
<div id="box"></div>
<button>动画按钮</button>

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px
auto; transition: all .4s linear; /*display: block;*/ } .hidden {
/*display: none;*/ opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    /*display: block;*/
}
 
.hidden {
    /*display: none;*/
    opacity: 0;
}

JS代码

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () {
if(box.hasClass(‘hidden’)){ box.removeClass(‘hidden’); }else{
box.addClass(‘hidden’); } });

1
2
3
4
5
6
7
8
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if(box.hasClass(‘hidden’)){
        box.removeClass(‘hidden’);
    }else{
        box.addClass(‘hidden’);
    }
});

在点击按钮后方可观看淡入淡出的卡通片效果,但是在css代码中排除对于display属性的两段注释将来,再打开浏览器一看,淡入淡出的作用全没了。
那大致是破坏性的职能,然后自己度娘了弹指间总计了多少个措施。

先是种形式:将display用visibility来顶替,我们都通晓visibility的效益其实跟display在顺其自然程度上一般,那为什么说只是早晚水平上一般呢,因为它照旧是占空间的,那你势必会说,这么用跟opacity没啥不一致呀。但却得以防止遮挡上面的层比如按钮的点击事件。

第三种格局是争持于第一种方式的进阶,利用了js的set提姆out和transitionend事件
css代码 将class hidden类中的opacity分离出来

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px
auto; transition: all .4s linear; visibility: visible; } .hidden {
display: none; } .visuallyhidden { opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    visibility: visible;
}
.hidden {
    display: none;
}
.visuallyhidden {
    opacity: 0;
}

js代码

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () { if
(box.hasClass(‘hidden’)) { box.removeClass(‘hidden’);
setTimeout(function () { box.removeClass(‘visuallyhidden’); }, 20); }
else { box.addClass(‘visuallyhidden’); box.one(‘transitionend’,
function(e) { box.addClass(‘hidden’); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if (box.hasClass(‘hidden’)) {
        box.removeClass(‘hidden’);
        setTimeout(function () {
            box.removeClass(‘visuallyhidden’);
        }, 20);
    } else {
        box.addClass(‘visuallyhidden’);
        box.one(‘transitionend’, function(e) {
            box.addClass(‘hidden’);
        });
    }
});

其两种办法与第二种办法类似,用requestAnimationFrame来代表set提姆eout,相应的改动了if条件里的js。
requestAnimationFrame其实也就跟set提姆eout/setInterval大概,通过递归调用同一方法来不断更新画面以高达动起来的作用,但它优于set提姆eout/setInterval的地方在于它是由浏览器专门为卡通提供的API,在运行时浏览器会自行优化措施的调用,并且只要页面不是激活状态下的话,动画会自动刹车,有效节约了CPU费用。

jQuery动态效果学习篇,元素的二种方法的相比较。js代码如下

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () { if
(box.hasClass(‘hidden’)) { box.removeClass(‘hidden’);
requestAnimationFrame(function(){ box.removeClass(‘visuallyhidden’); });
} else { box.addClass(‘visuallyhidden’); box.one(‘transitionend’,
function(e) { box.addClass(‘hidden’); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if (box.hasClass(‘hidden’)) {
        box.removeClass(‘hidden’);
        requestAnimationFrame(function(){
            box.removeClass(‘visuallyhidden’);
        });
    } else {
        box.addClass(‘visuallyhidden’);
        box.one(‘transitionend’, function(e) {
            box.addClass(‘hidden’);
        });
    }
});

以上就是当transition遇上display时遇上的坑。

1 赞 5 收藏 5
评论

亚洲必赢官网 1

CSS“隐藏”元素的二种方式的对照,css三种格局

一说起CSS隐藏元素,我想大多数小伙伴们都会想到的首先种格局就是设置display为none。那是最为人所熟练也是最常用的不二法门。我深信不疑还有很五人想到利用安装visibility为hidden来隐藏元素,那种格局也是常用的法子,而且也有过四个人驾驭相互的两样。除了那二种办法,本文还统计了有的相比不常用的点子,相比较了这两种“隐藏”元素方法的区分和优缺点,欢迎我们交换!!

二种方法的简练介绍

先是大家独家来说说到底有哪三种隐藏元素的办法,有一部分措施是有目共睹的,还有一对算是一种技术。

1.元素的突显与潜伏

两种艺术的大致介绍

率先大家独家来说说到底有哪两种隐藏元素的法子,有一部分方法是鲜明的,还有一对到底一种技术。

display:none

安装元素的display为none是最常用的隐藏元素的章程。

CSS

.hide { display:none; }

1
2
3
.hide {
     display:none;
}

将元素设置为display:none后,元素在页面校官彻底消失,元素本来占有的上空就会被其余因素占有,也就是说它会招致浏览器的重排和重绘。

1.1突显元素show()

display:none

安装元素的display为none是最常用的隐藏元素的措施。

1 .hide {
2     display:none;
3 }

将元素设置为display:none后,元素在页面校官彻底消失,元素本来占有的半空中就会被其余因素占有,也就是说它会招致浏览器的重排和重绘。

visibility:hidden

安装元素的visibility为hidden也是一种常用的隐藏元素的艺术,和display:none的区分在于,元素在页面消失后,其占用的长空如故会保留着,所以它只会促成浏览重视绘而不会重排。

.hidden{ visibility:hidden }

1
2
3
.hidden{
     visibility:hidden
}

visibility:hidden适用于那一个元素隐藏后不期待页面布局会暴发变化的场地

语法

$(selector).show(speed,callback);

浮现已经设置隐藏的因素

visibility:hidden

安装元素的visibility为hidden也是一种常用的隐藏元素的法子,和display:none的分别在于,元素在页面消失后,其占用的长空如故会保留着,所以它只会导致浏览器重绘而不会重排。

1 .hidden{
2     visibility:hidden
3 }

visibility:hidden适用于那一个元素隐藏后不指望页面布局会爆发变化的情形

opacity:0

opacity属性我信任大家都知情表示元素的透明度,而将元素的透明度设置为0后,在大家用户眼中,元素也是藏匿的,那算是一种隐藏元素的主意。

.transparent { opacity:0; }

1
2
3
.transparent {
     opacity:0;
}

这种情势和visibility:hidden的一个共同点是因素隐藏后依然占据着空间,但我们都清楚,设置透明度为0后,元素只是隐身了,它仍旧存在页面中。

1.2隐藏元素hide()

opacity:0

opacity属性我信任大家都知道表示元素的透明度,而将元素的透明度设置为0后,在大家用户眼中,元素也是隐身的,那终究一种隐藏元素的不二法门。

1 .transparent {
2     opacity:0;
3 }

那种方法和visibility:hidden的一个共同点是因素隐藏后仍然占据着空间,但大家都了然,设置透明度为0后,元素只是隐身了,它照旧存在页面中。

安装height,width等盒模型属性为0

那是本人总括的一种比较奇葩的技艺,不难说就是将元素的margin,border,padding,height和width等影响因素盒模型的属性设置成0,尽管元素内有子元素或内容,还相应设置其overflow:hidden来隐藏其子元素,这算是一种奇技淫巧。

.hiddenBox { margin:0; border:0; padding:0; height:0; width:0;
overflow:hidden; }

1
2
3
4
5
6
7
8
.hiddenBox {
     margin:0;
     border:0;
     padding:0;
     height:0;
     width:0;
     overflow:hidden;
}

这种办法既不实用,也恐怕存在着着一些标题。但毕生我们用到的局地页面效果可能就是应用那种情势来落成的,比如jquery的slideUp动画,它就是设置元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,从而达到slideUp的功效。

语法

$(selector).hide(speed,callback);

藏匿已显得的要素

设置height,width等盒模型属性为0

这是自家总括的一种比较奇葩的技巧,简单说就是将元素的margin,border,padding,height和width等影响因素盒模型的性质设置成0,假使元素内有子元素或内容,还应当设置其overflow:hidden来隐藏其子元素,那毕竟一种奇技淫巧。

1 .hiddenBox {
2     margin:0;
3     border:0;
4     padding:0;
5     height:0;
6     width:0;
7     overflow:hidden;
8 }

这种措施既不实用,也可能存在着着一些标题。但毕生我们用到的一部分页面效果说不定就是采纳那种办法来落成的,比如jquery的slideUp动画,它就是安装元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,从而完毕slideUp的效应。

要素隐藏后的风浪响应

如果被隐形的要素绑定了有的风云,大家执行了相关操作后,那几个事件是不是会被响应并施行吗,看看下边的代码:

JavaScript

<style> div { width: 100px; height: 100px; background: red;
margin: 15px; padding: 10px; border: 5px solid green; display:
inline-block; overflow: hidden; } .none { display: none; } .hidden {
visibility: hidden; } .opacity0 { opacity: 0; } .height0 { height: 0; }
</style> <div class=”none”></div> <div
class=”hidden”></div> <div class=”opacity0″></div>
<div class=”height0″>aa</div> <script
src=”/Scripts/jquery-1.10.2.min.js”></script> <script>
$(“.none”).on(“click”, function () { console.log(“none clicked”); })
$(“.hidden”).on(“click”, function () { console.log(“hidden clicked”); })
$(“.opacity0”).on(“click”, function () { console.log(“opacity0
clicked”); }) $(“.height0”).on(“click”, function () {
console.log(“height0 clicked”); }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin: 15px;
        padding: 10px;
        border: 5px solid green;
        display: inline-block;
        overflow: hidden;
    }
    .none { display: none; }
    .hidden { visibility: hidden; }
    .opacity0 { opacity: 0; }
    .height0 { height: 0; }  
</style>  
 
<div class="none"></div>
<div class="hidden"></div>
<div class="opacity0"></div>
<div class="height0">aa</div>  
 
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(".none").on("click", function () {
        console.log("none clicked");
    })
    $(".hidden").on("click", function () {
        console.log("hidden clicked");
    })
    $(".opacity0").on("click", function () {
        console.log("opacity0 clicked");
    })
    $(".height0").on("click", function () {
        console.log("height0 clicked");
    })
</script>

这段代码将多种隐藏元素的主意分别展现出来,然后绑定其点击事件,经过测试,主要有下边的定论:

1、display:none:元素彻底消灭,很鲜明不会触发其点击事件
2、visibility:hidden:无法触发其点击事件,有一种说法是display:none是因素看不见摸不着,而visibility:hidden是看不见摸得着,那种说法是不标准的,设置元素的visibility后不可以触发点击事件,表达那种情势元素也是消灭了,只是依然占据着页面空间。
3、opacity:0:可以触发点击事件,原因也很简短,设置元素透明度为0后,元素只是绝对于人眼不存在而已,对浏览器来说,它依然存在的,所以可以触发点击事件
4、height:0:将元素的冲天设置为0,并且安装overflow:hidden。使用那种办法来隐藏元素,是或不是可以触发事件要根据现实的情事来分析。如若元素设置了border,padding等品质不为0,很醒目,页面上仍能来看那些因素的,触发元素的点击事件完全小难题。假诺全勤质量都安装为0,很明确,那一个因素相当于消失了,即不能触发点击事件。

唯独这么些结论真的准确吗?
咱俩在上头的代码中添加这样一句代码:

1 $(“.none”).click();

1
1 $(".none").click();

结果发现,触发了click事件,也就是由此JS可以触发被安装为display:none的因素的风云。
故而前边不能触发点击事件的真正原因是鼠标不可能真正接触到被设置成隐藏的元素!!!

1.3来得、隐藏的切换toggle

要素隐藏后的事件响应

即使被埋伏的因素绑定了有的事变,大家实施了有关操作后,这几个事件是不是会被响应并执行呢,看看上边的代码:

 1 <style>
 2     div { 
 3         width: 100px; 
 4         height: 100px; 
 5         background: red; 
 6         margin: 15px; 
 7         padding: 10px; 
 8         border: 5px solid green; 
 9         display: inline-block; 
10         overflow: hidden; 
11     }
12     .none { display: none; }
13     .hidden { visibility: hidden; }
14     .opacity0 { opacity: 0; }
15     .height0 { height: 0; }  
16 </style>  
17 
18 <div class="none"></div>
19 <div class="hidden"></div>
20 <div class="opacity0"></div>
21 <div class="height0">aa</div>  
22 
23 <script src="/Scripts/jquery-1.10.2.min.js"></script>
24 <script>
25     $(".none").on("click", function () {
26         console.log("none clicked");
27     })
28     $(".hidden").on("click", function () {
29         console.log("hidden clicked");
30     })
31     $(".opacity0").on("click", function () {
32         console.log("opacity0 clicked");
33     })
34     $(".height0").on("click", function () {
35         console.log("height0 clicked");
36     })
37 </script>

那段代码将种种隐藏元素的不二法门分别展现出来,然后绑定其点击事件,经过测试,主要有下边的结论:

1、display:none:元素彻底消失,很醒目不会触发其点击事件
2、visibility:hidden:不可能触发其点击事件,有一种说法是display:none是因素看不见摸不着,而visibility:hidden是看不见摸得着,那种说法是不标准的,设置元素的visibility后无法触发点击事件,表明那种方式元素也是无影无踪了,只是如故占据着页面空间。
3、opacity:0:可以触发点击事件,原因也很简短,设置元素透明度为0后,元素只是周旋于人眼不存在而已,对浏览器来说,它依旧存在的,所以可以触发点击事件
4、height:0:将元素的莫大设置为0,并且安装overflow:hidden。使用那种方法来隐藏元素,是还是不是足以触发事件要根据实际的意况来分析。即使元素设置了border,padding等质量不为0,很明确,页面上或者能寓目这么些因素的,触发元素的点击事件完全不成难题。假如一切性质都安装为0,很引人侧目,这一个元素相当于消失了,即无法触发点击事件。

但是那么些结论真的准确吗?
咱俩在上头的代码中增加那样一句代码:

1 $(".none").click();

结果发现,触发了click事件,也就是通过JS可以触发被设置为display:none的因素的事件。
于是前边不能触发点击事件的实在原因是鼠标不能真正接触到被设置成隐藏的元素!!!

CSS3 transition对那三种方法的震慑

CSS3提供的transition极大地升高了网页动画的编撰,但并不是每一种CSS属性都可以经过transition来进展动画的。大家修改代码如下:

JavaScript

<style> div { width: 100px; height: 100px; background: red;
margin: 15px; padding: 10px; border: 5px solid green; display:
inline-block; overflow: hidden; transition: all linear 2s; }
</style> <div class=”none”></div> <div
class=”hidden”></div> <div class=”opacity0″></div>
<div class=”height0″>aa</div> <script
src=”/Scripts/jquery-1.10.2.min.js”></script> <script>
$(“.none”).on(“click”, function () { console.log(“none clicked”);
$(this).css(“display”, “none”); }) $(“.hidden”).on(“click”, function ()
{ console.log(“hidden clicked”); $(this).css(“visibility”, “hidden”); })
$(“.opacity0”).on(“click”, function () { console.log(“opacity0
clicked”); $(this).css(“opacity”, 0); }) $(“.height0”).on(“click”,
function () { console.log(“height0 clicked”); $(this).css({ “height”: 0,
}); }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin: 15px;
        padding: 10px;
        border: 5px solid green;
        display: inline-block;
        overflow: hidden;
        transition: all linear 2s;  
    }
</style>  
 
<div class="none"></div>
<div class="hidden"></div>
<div class="opacity0"></div>
<div class="height0">aa</div>  
 
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(".none").on("click", function () {
    console.log("none clicked");
    $(this).css("display", "none");
})
$(".hidden").on("click", function () {
    console.log("hidden clicked");
    $(this).css("visibility", "hidden");
})
$(".opacity0").on("click", function () {
    console.log("opacity0 clicked");
    $(this).css("opacity", 0);
})
$(".height0").on("click", function () {
    console.log("height0 clicked");
    $(this).css({
        "height": 0,
    });
})
</script>

通过测试,可以见见:
1、display:none:完全不受transition属性的影响,元素即刻消失
2、visibility:hidden:元素消失的光阴跟transition属性设置的光阴一模一样,可是没有动画效果
3、opacity和height等品质可以进行正常的动画片效果

倘若我们要透过CSS3来做一个退出的卡通片效果,应该如下:

.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
.fadeOut:hover { visibility: hidden; opacity: 0; }

1
2
.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
     .fadeOut:hover { visibility: hidden; opacity: 0; }

相应而且安装元素的visibility和opacity属性。

语法

$(selector).toggle(speed,callback)

若元素是隐蔽的,则呈现

若元素时显得的,则藏身

CSS3 transition对那两种方法的影响

CSS3提供的transition极大地提升了网页动画的编制,但并不是每一种CSS属性都得以经过transition来展开动画的。我们修改代码如下:

 1 <style>
 2     div { 
 3         width: 100px; 
 4         height: 100px; 
 5         background: red; 
 6         margin: 15px; 
 7         padding: 10px; 
 8         border: 5px solid green; 
 9         display: inline-block; 
10         overflow: hidden; 
11         transition: all linear 2s;  
12     }
13 </style>  
14 
15 <div class="none"></div>
16 <div class="hidden"></div>
17 <div class="opacity0"></div>
18 <div class="height0">aa</div>  
19 
20 <script src="/Scripts/jquery-1.10.2.min.js"></script>
21 <script>
22 $(".none").on("click", function () {
23     console.log("none clicked");
24     $(this).css("display", "none");
25 })
26 $(".hidden").on("click", function () {
27     console.log("hidden clicked");
28     $(this).css("visibility", "hidden");
29 })
30 $(".opacity0").on("click", function () {
31     console.log("opacity0 clicked");
32     $(this).css("opacity", 0);
33 })
34 $(".height0").on("click", function () {
35     console.log("height0 clicked");
36     $(this).css({
37         "height": 0,
38     });
39 })
40 </script>

通过测试,可以看到:
1、display:none:完全不受transition属性的震慑,元素立即消失
2、visibility:hidden:元素消失的时日跟transition属性设置的日子一模一样,可是并未动画效果
3、opacity和height等特性可以举办健康的动画效果

设若大家要经过CSS3来做一个脱离的动画效果,应该如下:

1 .fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
2     .fadeOut:hover { visibility: hidden; opacity: 0; }

应该而且设置元素的visibility和opacity属性。

计算表明

正文总括表明了“隐藏”元素的两种方法,其中最常用的要么display:none和visibility:hidden。其余的格局只好算是奇技淫巧,并不推荐应用它们来隐藏元素,它们的真的用途应该不在隐藏元素,而是通过询问那几个措施的风味,挖掘出其确实的行使情况。欢迎大家交换!!

参数表明

speed:规定突显或隐藏的快慢,取值:slow,fast,飞秒数

callback: 回调函数,当突显或潜伏执行后,执行的函数;

总括说明

正文总计表达了“隐藏”元素的二种艺术,其中最常用的或者display:none和visibility:hidden。其余的格局只好算是奇技淫巧,并不推荐使用它们来隐藏元素,它们的的确用途应该不在隐藏元素,而是通过摸底这几个措施的风味,挖掘出其真正的拔取情形。欢迎我们互换!!

 

本文地址:

一说起CSS隐藏元素,我想一大半小伙伴们都会想到的率先种格局就是设置display为none。那是…

 补充

发源评论区小伙伴们补充的技巧:

1、设置元素的position与left,top,bottom,right等,将元素移出至显示屏外

2、设置元素的position与z-index,将z-index设置成尽量小的负数

2 赞 3 收藏
评论

亚洲必赢官网 2

栗子–二级菜单的来得与潜伏

HTML

<ul class=”menu”>

<li><a href=”javascript:;”>menu1</a><li>

<li><a href=”javascript:;”>menu2</a>

<ul class=”sub-menu”>

<li><a href=”javascript:;”>mune21</a></li>

<li><a href=”javascript:;”>menu22</a></li>

</ul>

</li>

<li><a href=”javascript:;”>menu3</a></li>

<li><a href=”javascript:;”>menu4</a></li>

</ul>

CSS

ul,li,a{padding:0;margin:0;list-style:none;text-decoration:none;}

.menu{width:960px;height:45px;border-radius:5px;margin:100px auto;}

.menuli{float:left;position:relative;background:indianred;-webkit-transition:all
0.5s ease;

-moz-transition:all 0.5s ease;-ms-transition:all 0.5s
ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}

.menuli
a{display:inline-block;width:120px;height:45px;line-height:45px;text-align:center;margin:0
15px;padding:0 10px;color:#fff;}

.menuli a:hover{color:paleturquoise;}

.sub-menu{display:none;width:100%;position:absolute;top:70px;}

.sub-menu:after{content:”;width:0;height:0;position:absolute;top:-40px;left:65px;border:20px
solid transparent;;border-bottom-color:indianred;z-index:100;}

JS

方法一:使用show(),hide()

$(‘.menuli’).mouseover(function() {

$(this).find(‘.sub-menu’).show();

亚洲必赢官网 ,}).mouseout(function() {

$(this).find(‘.sub-menu’).hide();

});

方法二:使用toggel()

$(‘.menuli’).mouseover(function()
{$(this).find(‘.sub-menu’).toggle();}).mouseout(function()
{$(this).find(‘.sub-menu’).toggle();});

效益显示

亚洲必赢官网 3

要素的显得与隐藏

2.元素的淡入淡出效果

2.1 淡入fadeIn

语法

$(selector).fadeIn(speed,callback);

淡入已经隐藏的要素

2.2  淡出fadeOut

语法

$(selector).fadeOut(speed,callback);

淡出可知元素

2.3 切换fadeToggle

语法

$(selector).fadeToggle(speed,callback);

即使元素已脱离,则 fadeToggle() 会向元素添加淡入效果。

借使元素已淡入,则 fadeToggle() 会向元素添加淡出作用

2.4 切换fadeTo

语法

$(selector).fadeTo(speed,opacity,callback);

参数说明

speed:效果执行的进程

callback: 效果执行完后,调用的函数

opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)

栗子

HTML

<div class=”btn-group”>

<button class=”btn btn1″>fadeIn</button>

<button class=”btn btn2″>fadeOut</button>

<button class=”btn btn3″>fadeToggle</button>

<button class=”btn btn4″>fadeTo</button>

</div>

<div class=”box box1″> fadeIn</div>

<div class=”box box2″>fadeOut</div>

<div class=”box box3″>fadeToggle</div>

<div class=”box box4″>fadeTo</div>

CSS

div,button{padding:0;margin:0}

.btn{display:inline-block;width:120px;height:34px;line-height:34px;border:none;outline:none;background:paleturquoise;color:purple;}

.box{display:inline-block;margin:30px 15px 0
0;width:200px;height:200px;background:deeppink;transition:all 2s
ease-in-out;}

.box1{display:none;}

.box3{display:none;background-color:aquamarine;}

.box4{opacity:0;}

JS

$(function() {

$(‘.btn1’).click(function() {

$(‘.box1’).fadeIn(2000).css(‘background’,’paleturquoise’);

});

$(‘.btn2’).click(function() {

$(‘.box2’).fadeOut(‘slow’);

});

$(‘.btn3’).click(function() {

$(‘.box3’).fadeToggle();

});

$(‘.btn4’).click(function() {

$(‘.box4’).fadeTo(3000,1)

});

});

成效显示

亚洲必赢官网 4

要素的淡入淡出效果

3.滑动

3.1向下滑动slideDown

语法

$(selector).slideDown(speed,callbback)

3.2向上滑动slideUp

语法

$(selector).slideUp(speed,callbback)

3.3切换slideToggle

语法

$(selector).slideToggle(speed,callbback)

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

借使元素向上滑动,则 slideToggle() 可向下滑动它们。

参数表明

speed:效果执行的快慢

callback: 效果执行完后,调用的函数

栗子

HTML

<div class=”box1″>

<div class=”box2″></div>

</div>

CSS

div{padding:0;margin:0}

.box1{position:relative;top:50%;left:50%;width:200px;height:200px;background:khaki;}

.box2{display:none;position:absolute;left:0;bottom:0;width:200px;height:100px;background:#333;opacity:0.5;z-index:10;}

JS

$(function() {

var isclick =true;

$(‘.box1’).click(function() {

if(isclick) {

$(‘.box2’).slideDown();

isclick =false;

}else{

$(‘.box2’).slideUp();

isclick =true;

}

});

});

效能呈现

亚洲必赢官网 5

滑动事件

3.4动画animate

语法

$(selector).animate({param},speed,callback)

参数表明

{param}: 须求设置动画效果的CSS属性

speed: 动画执行的日子

callback:动画效果执行完后,调用的函数

注意:

当使用 animate() 时,必须采纳 Camel
标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是
padding-left,使用 marginRight 而不是 margin-right,等等。

animate:可以选拔相对值,在值的眼前加上 += 或 -=;

栗子

HTML

<div class=”box”></div>

CSS

div{padding:0;margin:0;}

.box{position:relative;top:0;left:0;width:100px;height:100px;border-radius:100%;background-color:brown;transition:all
0.35s ease;}

JS

var iSpeed =0,timer =null;

timer = setInterval(function() {

iSpeed++;

$(‘.box’).animate({

left: iSpeed*10+’px’

},’fast’);

if(iSpeed ===15) {

clearInterval(timer);

}

},1000)

效果体现

亚洲必赢官网 6

卡通效果

animate使用相对值

$(function() {

$(‘.changeSize’).click(function() {

$(this).animate({

width:’+=200px’,

height:’+=250px’,

left:’200px’

});

});

});

意义体现

亚洲必赢官网 7

动画效果2

3.5停歇动画stop

语法

$(selector).stop(stopAll,goToEnd)

参数表明

stopAll 参数规定是或不是应当排除动画队列。默许是
false,即仅甘休运动的卡通片,允许任何排入队列的卡通片向后实施;

goToEnd 参数规定是或不是登时成功近期动画。默许是 false;

默许地,stop() 会清除在被选元素上点名的当下动画

stop方法的应用可以不带参数

栗子

HTML

<button class=”stop”></button>

<div class=”box”></div>

CSS

div{padding:0;margin:0;}

.box{position:relative;top:0;left:0;width:100px;height:100px;background-color:orchid;}

.stop{display:block;border:none;outline:none;width:80px;height:34px;line-height:34px;background-color:aqua;}

JS

$(‘.box’).click(function() {

$(‘.box’).animate({left:’500px’},5000);

});

$(‘.stop’).click(function() {

$(‘.box’).stop();

});

效率突显

亚洲必赢官网 8

甘休动画

网站地图xml地图