jQuery的动态效果

女爷i 2023-07-13 13:51 3阅读 0赞

--------------------

## 1、显示和隐藏 ##

--------------------

show()：对象显示  
hide()：对象隐藏  
toggle()：对象切换（如果是显示就切成隐藏，隐藏就切成显示）

--------------------

## 2、滑动 ##

--------------------

slideDown()：对象向上滑动  
slideUp()：对象向下滑动  
slideToggle()：对象滑动切换（如果是向上滑动就切成向下滑动，向下滑动就切成向上滑动）

--------------------

## 3、淡入和淡出 ##

--------------------

fadeIn()：对象淡入  
fadeOut()：对象淡出  
fadeToggle()：对象切换（如果是淡入就切成淡出，淡出就切成淡入）  
fadeTo()：调整对象的透明度，其中有两个参数**opacity**（透明度）和**speed必须写**  
如：

$('.container').on('click',function () { 
        $('.container').stop().fadeTo(1000,0.5);
    });

--------------------

## 4、自定义动画 ##

--------------------

animate()：其中有一个参数**params**必须写，是以**对象的形式传递**，**属性可以不带引号，复合属性采用驼峰命名**  
如：

$('.container').on('click',function () { 
        $('.container').stop().animate({ 
            scrollTop:0,
            width:120,
            height:120
        })
    });

--------------------

## 5、以上函数都有这3个参数，分别是speed，easing，fn ##

--------------------

speed：为3个预定速度（如：slow，normal，fast）或者为动画时长的毫秒数（如：1000）  
easing：速度切换。默认是swing（快慢快），另一个是linear（匀速）  
fn：回调函数

--------------------

## 6、动画存在一个动画队列 ##

--------------------

如果动画多次触发，会形成一个**动画队列**，因此需要在每次使用动画的时候先用**stop（）清除动画队列**，否则会很鬼畜的  
本文只用于个人学习和纪录

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery效果

jQuery hide()和show() 使用hide()和show()方法来隐藏和显示HTML元素: <!DOCTYPE html> <html>

布满荆棘的人生/ 2023年07月19日 13:30/ 0 赞/ 10 阅读

相关 jQuery的动态效果

-------------------- 1、显示和隐藏 -------------------- show()：对象显示 hide()：对象隐藏 toggl

女爷i/ 2023年07月13日 13:51/ 0 赞/ 4 阅读

相关 html用jq设置动态效果,jQuery实现基本动画效果的方法详解

本文实例讲述了jQuery实现基本动画效果的方法。分享给大家供大家参考，具体如下： animate()方法用于创建自定义动画语法： $(selector).animat

短命女/ 2022年10月06日 09:56/ 0 赞/ 314 阅读

相关 jQuery动画效果

学习要点： 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性在以前很长一段时间里，网页上的

古城微笑少年丶/ 2022年08月18日 15:13/ 0 赞/ 226 阅读

相关【JQuery】——窗口效果

【html】 <html> <head> <title>JQuery实战-窗口效果</title> <meta http-equiv="Content-Type"

- 日理万妓/ 2022年07月14日 04:11/ 0 赞/ 197 阅读

相关 jQuery的插件开发的动态仪表板效果

日期：2013-3-23 来源：[GBin1.com][] [![jQuery的插件Larentis Mattia开发的仪表板效果][jQuery_Larentis

╰+攻爆jí腚メ/ 2022年03月20日 17:43/ 0 赞/ 209 阅读

相关 jQuery效果

开发工具与关键技术：Visual Studio 2015–jQuery 作者：廖亚星撰写时间：2019年3月31日 MVC中jQuery有自带的动画效果可以让我们简

朴灿烈づ我的快乐病毒、/ 2022年02月23日 09:28/ 0 赞/ 266 阅读

相关 jQuery Wookmark-2 jQuery动态表格插件的效果展示

之前在博客中写过一篇有关于Wookmark的文章，只能算是一个简单的介绍，至于它内部真正的用法和效果的展示，并没有具体的写出来，今天简单将其用法和效果的一些展示在这篇博客中介绍

左手的ㄟ右手/ 2021年12月21日 04:51/ 0 赞/ 346 阅读

相关放大镜jQuery效果

今天我们来写一下jQuery的效果来上代码 1,html代码 1 <div id='small'><img src="./icon/images/sj1

向右看齐/ 2021年10月01日 03:30/ 0 赞/ 501 阅读

相关 jQuery 效果

首先引入jquery <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> 1

待我称王封你为后i/ 2021年07月24日 17:36/ 0 赞/ 440 阅读