jQuery中的效果
在jQuery中最基本的效果：
hide（）方法：元素隐藏，隐藏的前提必须是元素display:block，
show（）方法：元素显示，显示的前提必须是元素display:none，
toggle（）方法：在元素隐藏和显示之间进行切换。
以上三种过渡动画，如果不传参数，直接显示和隐藏就没有过渡动画；如果上传数据，则会出现
单位格式:为slow“ , "normal" , "fast"
数字格式：单位是毫秒，在规定时间内会出现显示或 隐藏的动画。
<body> <div class="box"> <p>woshiaoteman</p> </div> <input type="button" value="只会隐藏" id="btn1">; <input type="button" value="只会显示" id="btn2">; <input type="button" value="可以隐藏、显示切换" id="btn3"> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script> const $p = $("p"); const $btn1 = $("#btn1") const $btn2 = $("#btn2"); const $btn3 = $("#btn3"); //添加点击事件，实现图片隐藏或显示 $btn1.click(function(){ // $img.hide("slow"); $img.hide(1000); }) $btn2.click(function(){ $img.show("normal"); }) $btn3.click(function(){ $img.toggle("fast"); }) </script>
在jQuery中最滑动效果：
slideDown（）：滑动显示（方向不一定）
slideUp（）：滑动隐藏
slideToggle（）：滑动切换
让元素在display属性的block 和 none 之间进行切换，如果不传输参数，那默认毫秒为400；
如果上传参数，则会出现
单位格式:为slow“ , "normal" , "fast"
数字格式：单位是毫秒，在规定时间内会出现显示或 隐藏的动画。
$btn1.click(function () { $img.slideUp(2000); }) $btn2.click(function () { $img.slideDown("normal"); }) $btn3.click(function () { $img.slideToggle(); })
注意的是：
如果滑动的元素没有设置宽高，就没有滑动效果；(有高度没宽度，效果如同show、hide，透明度不会发送变化；有宽度没高度，高度方向的滑动效果)
如果元素设置了高度和宽度，会进行上下垂直方向的滑动；
动画的效果：高度属性在0到设置值之间的变化，没有透明度动画；
如果元素设置了定位，偏移量方向如果是bottom参与了，滑动方向会发生变化
在jQuery中最淡入淡出效果：
fadeln（）方法：淡入，透明度逐渐增大最终显示；
fadeOut（）方法：淡出，透明度逐渐降低最终隐藏；
fadeToggle（）方法：切换效果
fadeTo（）方法：淡入或淡出到指定的某个透明度
让元素在display属性的block 和 none 之间进行切换，如果不传输参数，那默认毫秒为400；
如果上传参数，则会出现
单位格式:为slow“ , "normal" , "fast"
数字格式：单位是毫秒，在规定时间内会出现显示或 隐藏的动画。
const $img = $("img");
const $btn1 = $("#btn1")
const r$btn2 = $("#btn2");
const $btn3 = $("#btn3");
const $btn4 = $("#btn4")
//添加点击事件，实现图片隐藏或显示
$btn1.click(function () {
$img.fadeOut()
})
$btn2.click(function () {
$img.fadeIn()
})
$btn3.click(function () {
$img.fadeToggle()
})
$btn4.click(function(){
//需要传两个参数，时间和透明度
$img.fadeTo(1000,0.5)
})
浙公网安备 33010602011771号