jQuery 动画效果

最新推荐文章于 2022-12-13 13:43:21 发布
最新推荐文章于 2022-12-13 13:43:21 发布
阅读量153 收藏
点赞数
分类专栏： jQuery 前端 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UserPython/article/details/105947969
版权

jQuery中文开发文档

元素显隐效果

  • $(selector).show([speed], [easing], [fn] )：元素显示

  • $(selector).hide([speed], [easing], [fn] )：元素隐藏

  • $(selector).toggle([speed], [easing], [fn])：元素自动切换显隐

参数说明

  • speed：速度：慢速“slow”，正常“normal”，快速“fast” 或表示动画时长的毫秒数
  • easing：切换效果：摆动“swing”，直线“liner”
  • fn：动画完成时执行的函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #btn{
    
            display: block; width: 200px; height: 40px; margin: 50px auto;
        }
        img{
    
            /* display: none;  */
        }
    </style>
    <script>
        $(function(){
    
            // show()：元素显示
            $("#btn").click(function(){
    
                // $("img").css("display", "block");

                // $("img").show();

                // $("img").show(2000);

                // $("img").show(2000, function(){
    
                //     alert("我显示了");
                // });
            });

            // hide()：元素隐藏
            $("#btn").click(function(){
    
                // $("img").hide();

                // $("img").hide(2000);

                // $("img").hide(2000, function(){
    
                //     alert("我隐藏了");
                // });
            });

            // toggle()：元素切换显隐
            $("#btn").click(function(){
    
                // $("img").toggle();

                // $("img").toggle(2000);

                $("img").toggle(2000, function(){
    
                    alert("我切换了");
                });
            });
        })
    </script>
</head>
<body>
    <button id="btn">按钮</button>
    <br><br>
    <img src="../timg.png" width="400">
</body>
</html>

滑动效果

通过高度变化动态地显示或隐藏元素

  • $(selector).slideDown([speed], [easing], [fn])：通过调整高度来滑动显示元素

  • $(selector).slideUp([speed], [easing], [fn])：通过调整高度来滑动隐藏元素

  • $(selector).slideToggle([speed], [easing], [fn])：通过调整高度来切换元素的滑动显隐效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #btn{
    
            display: block; width: 200px; height: 40px; margin: 50px auto;
        }
最低0.47元/天 解锁文章
苦涩2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中的事件处理与动画效果
小王的博客
07-25 1133
jQuery的事件处理、 jQuery的事件对象、 jQuery其他方法、 jQuery动画
jQuery中使用animate方法的一个注意点
Kaiter的博客
05-07 362
  jQuery中，animate的定义是animate(params,[speed],[easing],[fn])，参数的含义如下： params:一组包含作为动画属性和终值的样式属性和及其值的集合 speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) easing:要使用的过渡效果的名称(时间曲线)(需要插件支持...
jQuery的自定义动画animate的语法，模仿王者手风琴效果
Enough0的博客
02-08 249
jQuery的自定义动画animate的语法 $(selector).animate({params},speed,callback); 1、 params （必需）参数定义形成动画的 CSS 属性，以对象形式书写。 2、 speed （可选）参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。 3、callback（可选） 参数是动画完成后所执行的函数名称。 animate的简单用法：（点击按钮后让div在一秒内移动到距离左边300px右边300px的地方，宽高变为300px） $(f
js进阶 13-4 jquery自定义动画animate()如何使用
weixin_34273479的博客
07-14 170
js进阶 13-4 jquery自定义动画animate()如何使用 一、总结 一句话总结：animate(params,[speed],[easing],[fn])，参数：params:一组包含作为动画属性和终值的样式属性和及其值的。   1、animate中的样式设置的时候的注意事项是什么？ 样式名必须以驼峰式方式，不然会出错，和在css中的不一样 集合注意：所有指定的属性必须用骆...
jquery动画效果 animate详解
12-12 234
animate(params,[speed],[easing],[fn]) $(selector).animate(styles,speed,easing,callback)参数styles 必需。规定产生动画效果的 CSS 样式和值。可能的 CSS 样式值（提供实例）：backgroundPositionborderWidthborderBottomWidthborderLeftWi...
jQuery动画效果
m0_51435825的博客
12-13 717
jQuery动画效果
常用jQuery动画效果
aoteman_6的博客
10-24 574
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。jQuery animate() 方法用于创建自定义动画。参数定义形成动画的 CSS 属性。
jQuery动画效果大全
热门推荐
若水弹丸之地
12-20 1万+
一、show()方法和hide()方法 1.show()与hide() show()：根据hide()方法记住的display属性值来显示元素。 hide()   : 将该元素的display样式改为 "none"。 2.参数让元素动起来： 单纯的调用show()和hide()相当于css("display","none/block/inline"),不会有任何动画。如果希望调用元素
jQuery动画效果（王者荣耀手风琴案例）
weixin_68266487的博客
10-18 558
自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()（2）参数：（1）：params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。（2）：speed：三种预定速度之一的字符串（“slow”,\"normal\" ,or\"fast\"）或表示动画时长的毫秒数值 （如：1000）。
jQuery 动画效果代码分享
10-21
本文给大家分享一段关于jquery实现的动画效果，代码简单易懂，非常不错，感兴趣的朋友参考下
jQuery动画效果实现图片无缝连续滚动
10-22
jQuery动画效果实现图片无缝连续滚动是一种常见的网页动态展示技术，常用于创建吸引人的广告轮播或图片展示区域。这种方法的关键在于通过JavaScript库jQuery来控制DOM元素的移动，以达到视觉上的无间断滚动效果。 ...
jQuery学习笔记之jQuery动画效果
10-26
本次学习分为两个文件的测试，第一个是基本动画，第二个是滑动和透明动画效果，分别如下
第十课 jquery动画效果1
08-03
- 动画队列是jQuery动画的另一个特性，多个`animate()`调用会按照添加的顺序依次执行，形成类似队列的执行流程。 jQuery 的动画效果使得开发者能够轻松地创建丰富的用户体验，通过控制元素的视觉变化吸引用户注意...
基于JavaScript实现网页计算器
苦涩
04-04 2589
基于JavaScript的网页计算器 基于HTML、CSS、JavaScript制作的网页计算器，其中可以实现加、减、乘、除、取整、求余、阶乘、科学计数等功能 界面如下： 有兴趣的朋友可以继续完善 ^ _ ^ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
JavaScript 获取元素及事件
苦涩
06-19 2065
使用ID获取元素对象 document.getElementById( “ID” );：返回文档中一个指定ID的元素对象，用于精确获取；若找到则返回该元素对象，否则返回null 获取或设置元素内容 innerText方法 元素对象.innerText = “文本”：返回或设置标签内的文本值，不包含HTML标签 <div id="zxw">id选择器</div> <script> var zxw = document.getElementById("zxw.
基于CSS3实现垂直轮播效果
苦涩
05-31 1582
效果图 方法：使用动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> .box{ .
HTML5 canvas组件
苦涩
07-06 1420
canvas简介 canvas标签是用来绘制图像的 canvas本身没有绘画的能力，仅仅是图形的容器，相当于一块画板 必须要使用脚本完成绘制，JS canvas绘画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #can.
原生实现jQuery动画效果
最新发布
05-18
jQuery动画效果可以通过使用jQuery提供的动画函数来实现。以下是一个基本的示例，可以让一个元素在3秒内从左到右移动200像素： ```html <!DOCTYPE html> <title>jQuery动画示例 <script src="https://code....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值