#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 淡入淡出提示的更多相关文章

  1. 利用jQuery的淡入淡出实现轮播器

    基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...

  2. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  3. 利用jquery的淡入淡出函数(fadeIn和fadeOut)--实现轮播

    首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果.利用jquery的淡入淡出函数(fadeIn和fadeOut).废话也不多说,边上代码 ...

  4. JQuery效果-淡入淡出、滑动、动画

    一.JQuery Fading方法 JQuery 有四种fade方法 1.fadeIn() 淡入                       对应也有$(selector).fadeIn(speed, ...

  5. jQuery 效果 - 淡入淡出

    通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn()演示 jQuery fadeIn() 方法. jQuery fadeOut()演示 ...

  6. jQuery 效果 – 淡入淡出

    在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuer ...

  7. 松软科技课堂:jQuery 效果 - 淡入淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  8. jquery实现淡入淡出

    fade方法包括四个: (1)fadeIn(speed,callback):淡入的方法,speed代表淡入的速度,可以是slow,fast,毫秒,不填等 例如: $(document).ready(f ...

  9. 11.jQuery之淡入淡出效果

    知识点:fadeIn   fadeOut  fadeToggle  fadeTo <style> div { width: 150px; height: 300px; background ...

随机推荐

  1. torch.Tensor和numpy.ndarray

    1. torch.Tensor和numpy.ndarray相互转换 import torch import numpy as np # <class 'numpy.ndarray'> np ...

  2. 安装python的pip库setup.py出现报错的解决过程

    错误起因: 第一次安python3.72的时候,直接去官网下了压缩包,解压后也没有exe文件.环境也是手动配置,在之后安装Pycharm的时候,系统找不到解释器,手动加上. 错误经过: 等写程序用到i ...

  3. 14 windows下安装pygame模块

    pycharm安装-推荐 file->setting->project->project interpreter->右边的+号,搜索pygame,点击下方的install pa ...

  4. 【LEETCODE】34、119题,Pascal's Triangle II

    package y2019.Algorithm.array; import java.util.ArrayList; import java.util.List; /** * @ProjectName ...

  5. java连接腾讯云上的redis

    目录 腾讯云上的配置 redis连接单机和集群 依赖 pom.xml redis参数的配置文件 遗留问题 腾讯云上的配置 在安全组上打开相关的端口即可 "来源" 就是你的目标服务器 ...

  6. springboot2.x配置druid sql监控

    后端接口响应慢,通常我们就需要优化代码和sql,如果项目中使用druid连接池,那么我们可以利用其提供的sql监控功能,来帮助我们快速定位慢sql已经sql执行次数等问题,springboot2之后, ...

  7. 路由基础(Routing)

    查看本机路由表: [root@controller02 ~]# cat /etc/iproute2/rt_tables # # reserved values # 255     local 254  ...

  8. Asp.Net Mvc Area二级域名

    参考:https://blog.maartenballiauw.be/post/2009/05/20/aspnet-mvc-domain-routing.html 参考:https://www.cnb ...

  9. 一、zuul如何路由到上游服务器

    所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 zuul在分布式项目中充当着一个网关的角色,而它最主要的功能像nginx一样针对上游服务 ...

  10. 原生js实现ajax封装

    一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...