jQuery toast 淡入淡出提示
#toast{
position: fixed;
top: 44%;left:50%;transform: translateX(-50%);
min-width: 80px;
max-width: 180px;
min-height: 18px;
padding: 10px;
line-height: 18px;
text-align: center;
font-size: 16px;
color: #fff;
background: rgba(0, 0, 0, 0.6);
border-radius: 5px;
display: none;
z-index: 999;
}
/* toast 提示
$("#toast").showMessage('网络错误,请稍后重试',1400);
*/
$.fn.extend({
showMessage: function( $msg, $time ){
var oDiv = document.createElement("div");
oDiv.setAttribute("id", "toast");
var oBody = document.getElementsByTagName('body')[0];
oBody.append(oDiv);
$('#toast').text( $msg );
$('#toast').fadeIn();
setTimeout(function() {
$('#toast').fadeOut();
}, $time);
}
});
jQuery toast 淡入淡出提示的更多相关文章
- 利用jQuery的淡入淡出实现轮播器
基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- 利用jquery的淡入淡出函数(fadeIn和fadeOut)--实现轮播
首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果.利用jquery的淡入淡出函数(fadeIn和fadeOut).废话也不多说,边上代码 ...
- JQuery效果-淡入淡出、滑动、动画
一.JQuery Fading方法 JQuery 有四种fade方法 1.fadeIn() 淡入 对应也有$(selector).fadeIn(speed, ...
- jQuery 效果 - 淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn()演示 jQuery fadeIn() 方法. jQuery fadeOut()演示 ...
- jQuery 效果 – 淡入淡出
在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuer ...
- 松软科技课堂:jQuery 效果 - 淡入淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
- jquery实现淡入淡出
fade方法包括四个: (1)fadeIn(speed,callback):淡入的方法,speed代表淡入的速度,可以是slow,fast,毫秒,不填等 例如: $(document).ready(f ...
- 11.jQuery之淡入淡出效果
知识点:fadeIn fadeOut fadeToggle fadeTo <style> div { width: 150px; height: 300px; background ...
随机推荐
- Linux题库练习
转一个Linux的题库供自己学习使用(滑稽) 转自:http://www.linuxdiyf.com/view_202485.html 选择题1 在终端下输入mount -a命令的作用是:CA 强制进 ...
- Image Perimeters
Description 给出一张由"x"和"."组成的矩阵.每个"x"可以向上下左右及两个斜对角进行连通,请问由某个点开始的"x& ...
- 软件素材---linux C语言:向文件末尾进行追加数据
void AppendDataToFile(char* filePath, char* msg) { // 以附加方式打开可读/写的文件, 如果没有此文件则会进行创建,然后以附加方式打开可读/写的文件 ...
- 【面试题】如何删除 ArrayList 中奇数位置的元素?
如何删除 ArrayList 中奇数位置的元素? 面试题携程 import java.util.ArrayList; import java.util.Iterator; import java.ut ...
- Java线程同步synchronized的理解
JVM中(留神:马上讲到的这两个存储区只在JVM内部与物理存储区无关)存在一个主内存(Main Memory),Java中所有的变量存储在主内存中,所有实例和实例的字段都在此区域,对于所有的线程是共享 ...
- 自定义注解扩展springMvc的validation注解
文章目录 前言 自定义校验注解 使用 后记 前言 我们都知道 springMvc 的检验框架使用的是 hibernate 的 validator ,检验数据,是有那么一点小爽快: 但是,validat ...
- fputcsv 导出excel,解决内存、性能、乱码、科学计数法问题
在PHP的日常开发中,时常会需要导出 excel ,一般我们会使用 PHPExcel ,性能强大,但是在数据量大的时候,phpexcel 性能差.内存溢出等各种不可控问题就会出现.因此,如果对导出样式 ...
- C++枚举类型教案
一.枚举类型的应用场景 只需要将需要的变量值一一列举出来,便构成一个枚举类型. 二.枚举类型的定义 ·定义方式: enum 枚举类型名字{枚举常量表}: ·关键字enum:说明接下来定义的是一个枚举类 ...
- Java基础IO类之打印流
package IODemo; import java.io.*; /* 打印流 : 很方便的进行输出 字节打印流 增强输出功能 字符打印流 */ public class PrintStreamDe ...
- idea 控制台 彩色打印日志
IDEA右上角:Edit Configurations,点击,找到VM options,填入-Dspring.output.ansi.enabled=ALWAYS. 重新启动应用,就会发现控制台日志变 ...