jQuery | 效果

最新推荐文章于 2022-04-01 15:29:26 发布

Zero Ice

最新推荐文章于 2022-04-01 15:29:26 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/weixin_41593408/article/details/87887749

版权

[001]前端系列专栏收录该内容

63 篇文章 0 订阅

订阅专栏

关键字	用法	语法
show()	显示	$(selector).hide(speed,callback);
hide()	隐藏	$(selector).show(speed,callback);
toggle()	显示/隐藏来回切换	$(selector).toggle(speed,callback);

注意：speed:“slow”、“fast” 或毫秒

hide() & show()

<script>
    $(document).ready(function () {
        $('#btn1').click(function(){
            $('.C_red').hide();
        });
        $('#btn2').click(function(){
            $('.C_red').show();
        });
    });
</script>

<body>
    <div class="C_red">

    </div>

    <button id="btn1">隐藏</button>
    <button id="btn2">显示</button>
</body>

toggle()

来回切换hide()&show()
语法：

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

<script>
    $(document).ready(function () {
        $('#btn1').click(function(){
            $('.C_red').toggle();
        });
    });
</script>

<body>
    <div class="C_red">

    </div>
    <button id="btn1">显示/隐藏</button>
</body>

三者语法：

以toggle为例：

<script>
    $(document).ready(function () {
        $('#btn1').click(function(){
            $('.C_red').toggle(1000,()=>{
                console.log('OK了');
            });
        });
    });
</script>

<body>
    <div class="C_red">

    </div>
    <button id="btn1">显示/隐藏</button>
</body>

Fading 方法

关键字	用法	语法
fadeIn()	用于淡入已隐藏的元素	$(selector).fadeIn(speed,callback);
fadeOut()	用于淡出可见元素	$(selector).fadeOut(speed,callback);
fadeToggle()	在 fadeIn() 与 fadeOut() 方法之间进行切换	$(selector).fadeToggle(speed,callback);
fadeTo()	允许渐变为给定的不透明度（值介于 0 与 1 之间）	$(selector).fadeTo(speed,opacity,callback);

注意：speed:“slow”、“fast” 或毫秒

用法跟上面实例差不多，所以不演示了。请注意与上面的show()&hide()的区别！！！

滑动方法

关键字	用法	语法
slideDown()	向下滑动元素	$(selector).slideDown(speed,callback);
slideUp()	用于向上滑动元素	$(selector).slideUp(speed,callback);
slideToggle()	在 slideDown() 与 slideUp() 方法之间进行切换	$(selector).slideToggle(speed,callback);

不再演示，请注意效果！！！

动画

animate() 方法用于创建自定义动画

注意：必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等

可以进行操作的：

操作多个属性
使用相对值（前面加上 += 或 -=）
使用预定义的值（height:‘toggle’）
使用队列功能（多个animate()）

stop() 方法

停止动画或效果，在它们完成之前
$(selector).stop(stopAll,goToEnd);

Callback 函数在当前动画 100% 完成之后执行（上面已经存在有例子了）

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）

Zero Ice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery | 效果

关键字用法语法show()显示$(selector).hide(speed,callback);hide()隐藏$(selector).show(speed,callback);toggle()显示/隐藏来回切换$(selector).toggle(speed,callback);注意：speed:“slow”、“fast” 或毫秒hide()...
复制链接

扫一扫

专栏目录