jQuery的动态效果

女爷i 2023-07-13 13:51 21阅读 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 条评论，21人围观）

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

相关阅读

相关 JQuery效果

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

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

相关 jQuery的动态效果

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

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

相关 jQuery效果

重点: 在做效果的时候难免会出现动画排队的现象,比如其他鼠标事件或者鼠标点击事件过快,效果来不及运行,就会出现排队显现,所以,我们要在做的动画的前面添加一个stop()方法

╰+攻爆jí腚メ/ 2023年07月08日 05:52/ 0 赞/ 31 阅读

相关 jQuery效果

jQuery给我们封装了很多动画效果，最为常见的有四种：显示隐藏、滑动、淡入淡出和自定义动画。下面将详细的为大家介绍这四种动画！一、显示隐藏显示语法

迷南。/ 2023年07月03日 12:15/ 0 赞/ 33 阅读

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

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

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

相关【JQuery】——窗口效果

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

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

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

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

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

相关 jQuery效果

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

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

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

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

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

相关 jQuery 效果

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

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