有个项目，之前添加记事成功是弹出一个提示框提示，添加成功，产品经理觉得这样不是很友好，但是不提示又不知道是不是添加成功，又不知道明确知道当前添加的是哪一条，所以：想让添加的当条信息闪动几下，然后停止。就OK
下面就来说说实现的原理：
1，先要获取到最新一条记事的pid，这个pid可以是后台给你接口中返回的值。
2，在添加成功后来闪动这条记事，
3，闪动的方法可以写到函数里，直接调用。
4，有闪动就要有定时器，开启定时器就要关闭定时器。
下面上代码：
代码只是写了一个例子，，，
在页面打开的时候闪动，，
<!DOCTYPE HTML>
<html>
<head>
<title>闪动提示</title>
<style>
*{ margin:0; padding:0;}
.box{color: #000}
.red{color:#d00;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function shake(element,className,times){
var i = 0,
t = false ,
o = element.attr("class"),
c = "",
times = times||2;
if(t) return;
t = setInterval(function(){
i++;
c = i%2 ? o + ' ' + className : o;
element.attr("class",c);
if(i==2*times){
clearInterval(t);
element.removeClass(className);
}
},200);
};
$(function(){
//domready 就闪动
shake($(".box"),"red",3);
});
</script>
</head>
<body>
<div class="box">打开就闪动</div>
</body>
</html>
下面在提示两种点击闪动，和不同校验闪动，如form表单输入错误的闪动
//点击闪动
$("#box1").bind({
click:function(){
shake($(this),"red",3);
return false;
}
});
//通不过mail校验闪动
$("#mail").blur(
function(){
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($(this).val())) {
shake($(this),"red",3);
}
}
);
相关推荐
jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画效果，因此用jQuery实现批注功能是一个高效的选择。以下将详细介绍如何利用jQuery来构建一个基本的批注系统。 首先，我们需要了解批注系统的...
本文实例讲述了jQuery实现仿QQ头像闪烁效果的文字闪动提示代码。分享给大家供大家参考，具体如下： jQuery 闪动的文字提示，仿QQ头像闪烁闪动提示，可以用于错误提示或其他吸引用户注意力的场合。 shake(ele,cls,...
本文介绍了一段使用jQuery实现模仿京东商城左侧菜单效果的代码。通过分析给定文件的内容，我们将展开对以下几个知识点的讨论： 1. jQuery的基本概念 2. jQuery鼠标事件的使用 3. CSS样式控制与动态切换 4. HTML结构...
接下来我们将深入探讨如何使用JavaScript来实现这种文字闪动效果。 首先，我们要理解基本的HTML结构，因为JavaScript通常与HTML结合使用，以增强网页的交互性。在这个案例中，我们有一个名为"文字闪烁.html"的文件...
在本文中，我们将深入探讨如何使用jQuery实现一种有趣的页面交互效果——鼠标点击后，页面上随机闪现文字并带有向上浮动消失的动画。这个效果能够为网站增添动态性，吸引用户的注意力，提升用户体验。 首先，jQuery...
这是一个简单的jQuery实现： ```javascript $(document).ready(function() { $('#wavy-text').hover( function() { $(this).addClass('active'); }, function() { $(this).removeClass('active'); } ); });...
今天我们要给大家分享一款非常惊艳的HTML5/CSS3文字特效，闪烁的霓虹灯...2、文字可动态输入，且输入的文字实时渲染霓虹灯特效。关于HTML5文字动画特效，大家也可以回顾一下之前分享的14款震撼人心的HTML5文字特效。
在本案例中，我们讨论的是一个专门用于实现文字闪烁效果的JS插件。这个插件允许开发者轻松地为网页中的文本添加动态闪烁效果，并能控制文字的停止闪烁。 在"js 文字闪烁插件"中，核心功能可能是通过修改CSS样式或者...
2. **闪动效果**：闪动效果是通过CSS动画或者JavaScript来实现的。在本例中，可能使用了`@keyframes`规则定义了一个名为"a-tada a-loop"的动画，该动画使元素按照预设的节奏和样式进行循环运动，类似于“tada”（一...
在本例中，为了实现图片的闪动效果，我们首先使用`setTimeout`在图片加载出来一段时间后（如5秒）触发第一个`setInterval`，然后通过`setInterval`来每隔500毫秒（0.5秒）改变图片的显示状态，即显示图片后迅速淡出...
这个名为“模仿-闪动-新浪微博发布框”的项目，显然旨在复制新浪微博发布框的功能和视觉效果，并且添加了一些额外的特性，如颜色变化和闪动效果。下面将详细讨论相关知识点。 首先，我们关注的是“html附带代码”这...
1. **jQuery横向图片滚动列表**：此案例展示了如何利用jQuery实现图片的横向滚动展示，通常用于新闻或产品展示，为用户提供流畅的浏览体验。 2. **jQuery动态温度计**：通过jQuery，可以创建一个实时更新的动态温度...
在探讨基于jQuery计算文本框中字数的功能时，首先需要了解该功能的实现目标，即在用户输入文字的同时计算字数，并给出剩余可输入字数的提示。当输入的字数超过设定的最大值后，需要通过一些视觉反馈（如输入框的闪动...
在本文中，我们将探讨如何使用jQuery实现这种效果。 首先，我们需要引入jQuery库，这是实现该功能的基础。在示例代码中，引用了`jquery-2.0.3.js`文件，这表示使用的是jQuery 2.0.3版本。如果你的项目中已经包含了...
通过纯CSS3实现的Sublime编辑器界面特效，不仅能够模拟出真实编辑器的基本外观，还能添加动态元素，如光标的闪动效果，以增加用户体验的真实感。 首先，我们来看看CSS3的关键特性在构建这个项目中的应用： 1. **...
示例描述：JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...
示例描述：JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...