一、隐藏元素 hide()
jQuery在做hide操作的时候,是会保存本身的元素的原始属性值,再之后通过对应的方法还原的时候还是初始值。
比如一个元素的display属性值为inline,那么隐藏再显示时,这个元素将再次显示inline。
一旦透明度 达到0,display样式属性将被设置为none,这个元素将不再在页面中影响布局
<div id="a1">hide操作</div> <button>直接hide</button> <button>hide带动画</button> $("button:first").click(function() { $("#a1").hide(); // 无参 }); $("button:last").click(function() { $("#a1").hide({ //有参数 duration: 3000, complete: function() { alert('执行3000ms动画完毕') } }) });
$("").hide(2000,function(){
...
})
$(selector).hide(speed,easing,callback) 参数可选 毫秒 ,运行曲线 ,回调函数
二、show() 方法
用法是hide() 类似
show与hide方法是非常常用的,但是一般很少会基于这2个属性执行动画,大多情况下还是直接操作元素的显示与隐藏为主
注意事项:
- show与hide方法是修改的display属性,通过是visibility属性布局需要通过css方法单独设置
- 如果使用!important在你的样式中,比如display: none !important,如果你希望.show()方法正常工作,必须使用.css('display', 'block !important')重写样式
- 如果让show与hide成为一个动画,那么默认执行动画会改变元素的高度,高度,透明度
$("button").click(function() {
$("#a1").hide(3000).show(3000)
});
优化:
$("button").click(function() { $("#a1").stop().hide(3000).show(3000); // stop()方法为被选元素停止当前正在运行的动画,防止动画运行中,用户多次点击-->形成多次触发。 });
三、显示与隐藏切换toggle方法
这是最基本的操作,处理元素显示或者隐藏,因为不带参数,所以没有动画。通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。
- 如果元素是最初显示,它会被隐藏
- 如果隐藏的,它会显示出来
display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline
$("button:first").click(function() {
$(".left").toggle(3000)
});
四、下拉显示动画slideDown
.slideDown()方法将给匹配元素的高度的动画
$("button:first").click(function() {
$("#a1").slideDown(3000)
});
$("button:last").click(function() {
$("#a2").slideDown(3000,function(){
alert('动画执行结束')
})
});
- 下拉动画是从无到有,所以一开始元素是需要先隐藏起来的,可以设置display:none
- 如 果提供回调函数参数,callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。
- 这个回调函数不设置任何参数,但是 this会设成将要执行动画的那个DOM元素,如果多个元素一起做动画效果,那么要非常注意,
- 回调函数会在每一个元素执行完动画后都执行一次,而不是这组 动画整体才执行一次
五、上卷隐藏动画slideUp()
用法跟slideDown() 方法类似
六、上卷下拉切换slideToggle
$("button").click(function() {
$("#a1").slideToggle(500);
});
七、淡出动画fadeOut()
设置元素透明度为0,可以让元素不可见,透明度的参数是0~1之间的值,通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。
fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果
<p style="background:blue;">淡入效果</p> <select id="animation"> <option value="1">fadeOut( )</option> <option value="2">fadeOut( "slow" )</option> <option value="3">fadeOut( 3000 )</option> <option value="4">fadeOut( 1000, complete )</option> <option value="5">fadeOut( 1000, "linear" )</option> <option value="6">fadeOut( options )</option> </select> <input id="btnFadeOut" type="button" value="点击淡出隐藏" /> $("#btnFadeOut").click(function() { var v = $("#animation").val(); if (v == "1") { $("p").fadeOut(); } else if (v == "2") { $("p").fadeOut("slow"); } else if (v == "3") { $("p").fadeOut(3000); } else if (v == "4") { $("p").fadeOut(2000, function() { alert("隐藏完毕!"); }); } else if (v == "5") { $("p").fadeOut(1000, "linear"); } else if (v == "6") { $("p").fadeOut({ duration: 1000 }); } });
八、淡入效果fadeIn
元素是隐藏的才行,用法与fadeOut()类似
注意:
- 淡入的动画原理:操作元素的不透明度从0%逐渐增加到100%
- 如果元素本身是可见的,不对其作任何改变。如果元素是隐藏的,则使其可见
九、淡入淡出切换 fadeToggle()
fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。
常用语法:.fadeToggle( [duration ] ,[ complete ] )
可选的 duration 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是 fadeToggle完成后所执行的函数名称。
<p>测试文字淡入淡出切换效果</p>
<select id="animation">
<option value="1">fadeToggle( )</option>
<option value="2">fadeToggle( "slow" )</option>
<option value="3">fadeToggle( 3000 )</option>
<option value="4">fadeToggle( 1000, complete )</option>
<option value="5">fadeToggle( 1000, "linear" )</option>
<option value="6">fadeToggle( options )</option>
</select>
<input id="btnFadeSwitch" type="button" value="点击切换显示/隐藏">
$("#btnFadeSwitch").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeToggle();
} else if (v == "2") {
$("p").fadeToggle("slow");
} else if (v == "3") {
$("p").fadeToggle(3000);
} else if (v == "4") {
$("p").fadeToggle(1000, function() {
alert("切换完毕!");
});
} else if (v == "5") {
$("p").fadeToggle(1000, "linear");
} else if (v == "6") {
$("p").fadeToggle({
duration: 1000
});
}
});
十、淡入效果fadeTo()
.fadeTo( duration, opacity ,callback)
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
$("p").fadeTo(1000, 0.9, function() {
alert('完成')
});
十一、toggle与slideToggle以及fadeToggle的比较
操作元素的显示和隐藏可以有几种方法。
例如:
改变样式display为none
设置位置高度为0
设置透明度为0
toggle、sildeToggle以及fadeToggle的区别:
- toggle:切换显示与隐藏效果
- sildeToggle:切换上下拉卷滚效果
- fadeToggle:切换淡入淡出效果
toggle与slideToggle细节区别:
- toggle:动态效果为从右至左。横向动作,toggle通过display来判断切换所有匹配元素的可见性
- slideToggle:动态效果从下至上。竖向动作,slideToggle 通过高度变化来切换所有匹配元素的可见性
fadeToggle方法
-
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
-
元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。
-
元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。