jq常用动画fade slide
https://www.cnblogs.com/sandraryan/
hide();
<div class="box">big box</div>
$('.box').hide(5000, function(){
console.log('hhhhh');
});
//hide() h设置隐藏元素
//5000 是用5000ms内实现这个元素消失效果
// 内部函数是回调函数callback,是5000ms后调用的函数
//也可以不接收参数
//接收的参数是时间值 和 一个执行结束后的回调
(css样式省略)
浏览器中元素会逐渐消失,消失后控制台打印内容
show();
.hide-box {
height: 200px;
background-color: rgb(25, 99, 25);
font-size: 60px;
text-align: center;
line-height: 200px;
color: white;
display: none;
} <div class="hide-box">big box</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script>
$('.hide-box').show(5000, function(){
console.log('hhhhh');
});
</script>
show(); 让一个隐藏的按钮显示
举个栗子:
点击按钮让图片切换隐藏显示
.box {
height: 200px;
background-color: rgb(25, 99, 25);
font-size: 60px;
text-align: center;
line-height: 200px;
color: white;
} <button class="btn">button</button>
<div class="box">big box</div>
$('.btn').click(function(){
$('.box').toggle(5000,function(){
console.log(11); });
});
// 可以不接收参数
// 可以接受一个时间参数,作为切换的时间
//也可以接受一个回调函数,执行一次切换执行一次回调
fadeIn() 淡入已隐藏的元素。
fadeOut() 淡出可见元素。
fadeToggle() 切换。
fadeTo() 渐变为给定的不透明度(值介于 0 与 1 之间)。需要给一个透明度的值作为参数。
接受的时间值,除了数字也可以是slow fast。
<button class="btn">button</button>
<div class="box">big box</div> $('.btn').click(function(){
$('.box').fadeToggle(3000);
});
slideDown() 向下滑动元素。
slideUp() 上滑动元素。
slideToggle() 上下滑的切换。
jq常用动画fade slide的更多相关文章
- jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
- 编写自己的代码库(css3常用动画的实现)
编写自己的代码库(css3常用动画的实现) 1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动).js的代码库也发过两次,两篇文章.之前也写了css3的热身实战 ...
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
- iOS开发——动画总结OC篇&所有常用动画总结
所有常用动画总结 先来装下B,看不懂没关系,其实我也看不懂-
- jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- jq初入行常用动画
--jq动画分类--(1)jQuery的动画其实就是将之前提到过的各种特效进行封装,并对其性能进行优化.(2)jQuery动画分为三个部分:非自定义动画,自定义动画,和全局动画设置. 一.非自定义动画 ...
- ios常用动画
// // CoreAnimationEffect.h // CoreAnimationEffect // // Created by VincentXue on 13-1-19. // Copyri ...
- 【转】IOS 30多个iOS常用动画,带详细注释
原文: http://blog.csdn.net/zhibudefeng/article/details/8691567 CoreAnimationEffect.h 文件 // CoreAnimati ...
- iOS常用动画-b
CoreAnimationEffect.h // CoreAnimationEffect // // Created by VincentXue on 13-1-19. // Copyright ...
随机推荐
- 【python之路19】文件操作
一.打开文件 文件句柄 = open('文件路径', '模式') 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作. 打开文件的模式有: r ...
- KMLLayer
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【JZOJ3617】【ZJOI2014】力
╰( ̄▽ ̄)╭ 对于100%的数据,n≤100000;0<qi<1,000,000,000. (⊙ ▽ ⊙) 令ri=1i2, 设Fj=∑j−1i=0qi∗rj−1−i,Gj=∑j−1i= ...
- css中用一张背景图做页面的技术有什么优势?
css中用一张背景图做页面的技术有什么优势? 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久.但是如果弄成一个文件,再拷贝就会快很多. CSS Sprites ...
- DIV+CSS网页布局常用的一些基础知识整理
CSS命名规范 一.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二.常 ...
- windows上安装Anaconda和python的教程详解
一提到数字图像处理编程,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因 ...
- DX9纹理半像素偏移-Directly Mapping Texels to Pixels
原文:DX9纹理半像素偏移-Directly Mapping Texels to Pixels 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u01 ...
- PHP开发api接口安全验证的实例,值得一看
php的api接口 在实际工作中,使用PHP写api接口是经常做的,PHP写好接口后,前台就可以通过链接获取接口提供的数据,而返回的数据一般分为两种情况,xml和json,在这个过程中,服务器并不知道 ...
- 【JZOJ4799】【NOIP2016提高A组模拟9.24】我的快乐时代
题目描述 输入 一行,两个整数l,r . 输出 一行,一个整数,表示第l 天到第r 天的愉悦值的和. 样例输入 64 89 样例输出 1818 数据范围 解法 可以参考数位动态规划的想法. 从个位开始 ...
- java定时(循环)执行一个方法
java中设置定时任务用Timer类可以实现. 一.延时执行 首先,我们定义一个类,给它取个名字叫TimeTask,我们的定时任务,就在这个类的main函数里执行.代码如下: package test ...