弹窗的淡入淡出

var sendMsgTip = function(className,$event){
                $event.stopPropagation();
                $(className).stop(true,true).fadeIn(500);
                $(className).stop(true,true).delay(2000).fadeOut(1000);
                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            }

HTML:

<!--添加定时短信息提示信息弹层 -->
    <div class=" add-timer-tips"style="display: none;" >
        <i class="icon_three prompt-tips-icon" ></i>
        <span class="add-text-message">定时时间已过期</span>
    </div>

项目中碰到一个小bug,就是创建一个弹窗,然后点击时候触发,然后多次点击弹窗多次出现;需求是多次点击按钮只是显示最后一次的弹窗;以上使用的就是

jQuery里的stop方法解决的;淡入淡出;

2.弹窗的另一个方法;

var newsTips = {    content: ‘消息内容不能为空‘};
function showErrorTip(tip) {    $(‘.newsTips‘).text(tip);   $(‘.newsTips‘).fadeIn();    $timeout(function(){ //angularjs            $(‘.newsTips‘).fadeOut(1500);        if (!$scope.$$phase) {            $scope.$apply();        }    }, 2000);}
 
时间: 2024-10-10 15:17:26

弹窗的淡入淡出的相关文章

【jQuery】利用淡入淡出效果实现兼容IE6的告警提示

其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择jQuery,是因为这东西能够很好地兼容IE6. 一.基本目标 当输入框的输入内容的字符数无论中文与英文大

有关网页常见图片淡入淡出的效果的随笔

网页常见的图片淡入淡出的效果还是比较常见的,在这里,我个人来分享一些自己的一些笔记. <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>淡入淡出图片效果图</title>    <style type="text/css">        #img1{ filter:alpha(opacity:30); o

jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果   $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作

jQuery淡入淡出

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淡入淡出</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src=&q

jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画

jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hide()与show()方法 eg1:显示 <style type="text/css"> *{margin:0;padding:0;} .body{font-size:12px;font-family:"微软雅黑";color:#666;} .yym{wid

淡入淡出效果 (jQuery)

1jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为0,可以让元素不可见,透明度的参数是0~1之间的值,通过改变这个值可以让元素有一个透明度的效果.常见的淡入淡出动画正是这样的原理. fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果 所谓"淡出"隐藏的,元素是隐藏状态不对作任何改变,元素是可见的,则将其隐藏. .fa

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

首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果.利用jquery的淡入淡出函数(fadeIn和fadeOut).废话也不多说,边上代码边讲解.最后附上demo效果地址. <!--整体容器-->    <div class="imgbox">        <!--图片列表,除第一张显示外,其余隐藏-->        <ul>            <li style

窗口淡入淡出

思路 1)#define WINVER 0X500  // 放在所有头文件前 #include <winuser.h> 2) WM_CREATE AnimateWindow(hwnd, 1000, AW_ACTIVATE|AW_BLEND); InvalidateRect(hwnd, NULL, TRUE); UpdateWindow(hwnd); 3) WM_CLOSE AnimateWindow(hwnd, 1000, AW_HIDE|AW_BLEND); 注:除淡入淡出外,还有滑动特效

JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)

JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() 淡入淡出:JQuery fadeIn().JQuery fadeOut().JQuery fadeToggle().JQuery fadeTo() 滑动:JQuery slideDown().JQuery slideUP().JQuery slideToggle() 动画:JQuery animat