js动画效果

已于 2022-05-27 18:08:18 修改
阅读量86 收藏
点赞数
文章标签： 前端
于 2021-08-07 23:19:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53336383/article/details/119494021
版权

hide 隐藏

$().hide();
$(this).hide()  表示隐藏当前目标元素
$("P").hide()   表示隐藏所有 <p> 元素。
如果没有参数的话 表示立马隐藏
如果有参数的话 是以收缩的形式隐藏 参数为时间

show 显示

$().show();
show()表示显示目标元素
如果没有参数的话 表示立马显示
如果有参数的话 是以释放的形式显示 参数为时间

show hide

$(function(){                                               
 $("#hide").click(function(){
 $("p").hide();
 });
 $("#show").click(function(){
 $("p").show();
 });
});

<body>
<p id="pig">看看我</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>

slide 滑动

slideup()

以向上滑动的方式隐藏目标元素
$("").click(function(){
  $("").slideUp();
});

slideDown()

以向下滑动方式显示目标元素
$("").click(function(){
  $("").slideDown();
});

slideToggle

slideToggle()通过使用滑动效果  在显示和隐藏状态之间进行切换
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$("").click(function(){
  $("").slideToggle();
});

fade 淡入淡出

fadeIn（）

$().fadeIn();
fadeIn() 让隐藏的元素显示。
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut（）

$().fadeIn(); 
fadeOut() 让显示的元素隐藏
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("fast");
  $("#div3").fadeOut(3000);
});

fadeTo()

$().fadeTo("", );
用淡出的动画来隐藏一个元素  第一个参数为时间 毫秒 第二个参数为透明度(0-1之间)
$("button").click(function(){
  $("#div1").fadeTo("slow",0.1);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

fadeToggle()

$().fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(2000);
});

animate 动画

animate() 方法用于创建自定义动画
$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

可使用多个属性
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

stop()

停止动画或效果
$("#stop").click(function(){
  $("#app").stop();
});
PAOCAI553
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript与动画效果
吃不胖.
10-10 409
否则，将DIV元素的opacity属性设置为透明度值，将filter属性设置为alpha(opacity=透明度值*100)，并将透明度值逐渐减小。定义slide动画以在2秒内完成，设置ease-in-out动画效果，并设置infinite和alternate属性来使动画无限循环并往返运动。在JavaScript中，创建一个名为fade()的函数，在其中使用getElementById()方法获取DIV元素的引用。使用JavaScript可以调整元素的位置和缩放比例，从而创建弹跳效果。
js动画与html动画效果,九种原生js动画效果
weixin_42549496的博客
06-03 954
在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做(比如jquery)，这里我介绍下如何让通过原生的js来实现像框架一样的动画效果！1、匀速动画效果说明：匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的匀速动画html,body{margin:0;padding:0;}div{margin:0;padding:0;}.odiv{width:200px;...
html js 动画效果,JavaScript 动画效果
weixin_35988311的博客
06-03 649
使用JavaScript可以生成图像的动画效果。———————————————————————JavaScript 动画使用JavaScript可以生成图像的动画效果，技巧是使用JavaScript在不同的事件上转换显示不同的图片。下面的例子我们在页面上增加一个图像，用来当作一个链接按钮。然后我们在这个按钮上增加一个onMouseOver事件和一个onMouseOut事件，这两个事件将调用不同的函...
JavaScript 动画效果
xiangxiongfly
06-10 8061
文章目录JS动画实现概述平滑动画无缝连续滚动特效轮播图轮播图淡入淡出效果 JS动画实现 概述 在CSS3中可以通过transition过渡属性可以实现动画 JS可以利用CSS3中的transition属性实现元素动画 平滑动画 利用CSS transition属性实现平滑动画效果 <button>开始动画</button> <div id="box"></div> <script> var btn = document.queryS
【JavaScript-动画原理】如何使用js进行动画效果的实现
zhaochen1127的博客
09-25 1万+
利用js实现动画效果
JS实现动画效果
weixin_60323200的博客
09-14 4776
动画实现原理 核心原理：通过定时器setInterval() 不断移动盒子位置。 实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left 缓动效果原理 缓动就是变速运动，最常见的就是让速度慢下来 思路： 让盒子每次移动的距离慢慢变小，速度就会慢慢减下来 核心算法：（目标值-现在的位置）/ 10 作为每次移动的距离步长 停止的条件是：让盒子位置等于目标位置.
常见JS动画效果
热门推荐
lavendersue的博客
09-27 2万+
作为一名前端开发人员，想要的大多都是，在开发过程中，看着自己制作的动画的炫酷以及困难的解决；开发结束后，自己的项目、成果可以被他人认可接受。人们浏览网页时，若一个网页动画效果丰富炫酷，性能良好，体验度良好，自然会受到吸引去打来浏览。吸引用户，自然少不了网页的布局优美、色彩搭配的恰当，更重要的是其中吸引人的炫酷动画效果。
JavaScript 动画效果的实现（附带示例）
Itmastergo的博客
01-29 2074
JavaScript 动画主要是通过修改元素样式来实现的，能够实现许多 CSS 动画所不能实现的效果，例如暂停、回放等。
threejs 动画效果的实现与高级技巧
v17191194242的博客
06-01 731
艾斯视觉作为行业ui设计与前端开发服务商很高兴能在这里与你共同探讨：通过掌握 Three.js 中动画效果的实现方法和高级技巧，开发者能够创造出极具魅力的三维场景和互动体验。展示一些实际项目中运用多种动画效果和高级技巧的场景，如一个具有复杂角色动作的游戏场景或一个动态展示的机械模型。随着技术的不断进步，Three.js 的动画效果将变得更加丰富和强大，可能会引入新的动画技术和特性。可以设置动画的循环方式，如单次播放、循环播放等，以及通过代码来控制动画的开始、暂停、停止等操作。
展开收起js动画效果
qq_44544363的博客
01-20 5633
展开收起js动画效果 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术：Adobe Dreamweaver CC 2017 Java Script 作者：林敏静 撰写时间：2019年1月18日 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^...
JS动画效果代码3
10-30
用js实现的动画效果
JS动画效果代码2
10-30
用js实现的图片生成效果代码，学习js的朋友可以看看
javascript动画效果打开/关闭层
10-30
JavaScript动画效果在网页交互设计中扮演着重要角色，它可以为用户带来更加生动、直观的体验。本示例主要讲解如何使用JavaScript实现一个简单的打开和关闭层的动画效果。层（Layer）通常指的是网页上的某个可操作的...
Javascript动画效果（1）
10-21
主要为大家详细介绍了第一篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript动画效果（4）
10-21
主要为大家详细介绍了第四篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1120
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 925
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
HTML_表单 和 表单案例
secret010的博客
07-05 242
【代码】HTML_表单 和 表单案例。
WebGIS面试题
最新发布
热爱WebGIS的博客
07-08 264
文章目录1. 前端1.1. 选择器的优先级1.2. CSS 中它的布局有哪些？1.3. CSS3 的新特性1.4. CSS 的两种盒子模型1.5. CSS 的伪元素选择器和伪类选择器有哪些？1.6. ES6 的新特性1.7. 谈谈你对 promise 的理解1.8. 简单说一下原型链1.9. 简单说一下深浅拷贝1.10. 去掉一个数组的重复元素，你是怎么做的，请具体说说1.11. 说说同步和异步的区别？1.12. 立即执行函数是什么？1.13. 说说 this 的指向1.14. 请你说说 new 操作符具体
javascript动画效果简单
12-16
以下是一个使用JavaScript实现的简单动画效果的例子： ```html <!DOCTYPE html> <html> <head> <title>JavaScript Animation</title> <style type="text/css"> #mydiv { width: 50px; height: 50px; background-color: green; position: absolute; } </style> </head> <body> <div id="mydiv"></div> <script type="text/javascript"> var elem = document.getElementById("mydiv"); var pos = 0; var id = setInterval(frame, 5); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + "px"; elem.style.left = pos + "px"; } } </script> </body> </html> ``` 该例子中，我们使用JavaScript实现了一个简单的动画效果，即将一个矩形从左上角移动到右下角。我们使用`setInterval()`函数来定时执行`frame()`函数，`frame()`函数中通过改变元素的`top`和`left`属性来实现元素的移动。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值