使用swiper.animate时,给一个对象添加两个动画且动画循环的方法
swiper官网上给对象加一个动画的方法是
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>
js代码为
<script>
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>
</body>
然而我们想让这个对象进场后再循环执行一个动画效果,如心跳
这时我们需要用到swiper的一个属性——mySwiper.activeIndex 返回当前活动块的索引
我们用这个属性判断滑到哪一张时执行一个命令,即:再执行下一个动画就行了
因为添加动画后会把上一个动画给覆盖掉,所以需要加一个定时器
比如我们在对象进场后加这个闪烁的动画

<script>
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
switch (swiper.activeIndex) {
case 1:
setTimeout(function(){
$("p").css({
animation: 'flash 1s linear 0s infinite'
})
},500);//定时器时间是上一个动画执行时间
break;
case 2:
}
}
})
</script>
以上纯属个人想法,如有不妥还请指正!
使用swiper.animate时,给一个对象添加两个动画且动画循环的方法的更多相关文章
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 将对象的所有属性名放到一个数组中 || 获得对象的所有属性名 || return;不具有原子性 || 怎样自己制作异常|| 判断对象有没有某个属性 || 当传递的参数比需要的参数少的时候,没有的值会被赋予undefined || 获得函数实际传递的参数 || 怎么用函数处理一个对象 || 用一个名字空间定义一个模块所有的函数 || 给一个对象添加方法
获得对象的所有属性名 || 将对象o的所有属性名放到数组中 var o = {x:1,y:2,z:3}; var arr = []; var i = 0; for(arr[i++] in o){};/ ...
- QTableView 一列添加两个按钮
在QTableView的一列里添加两个按钮,之前添加一个按钮的思路是一样的,只是计算了一下按钮的宽,放两个按钮而已. 添加一个按钮的例子:QTableView 添加按钮 本例源代码:QtTowButt ...
- 用Modelsim仿真QuartusII综合后网表时库的添加方法(转)
这两天做综合后仿真,发现FPGA器件库又不会加了,无奈上网找方法.说起来不好意思,很早就接触Modelsim这个仿真软件了,可是没有好好琢磨.把这两天找的方法贴出来,再加上自己的理解,以后忘了可以上博 ...
- 在唯一密钥属性“fileExtension”设置为“.”时,无法添加类型为“mimeMap”的重复集合项
在ASP.NET 网站的配置文件中添加了MIME类型,但是运行网站后在IIS上和页面上提示"在唯一密钥属性“fileExtension”设置为“.woff”时,无法添加类型为“mimeMap ...
- 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题
为什么返回的数据前面有callback? 这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...
- ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息
一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...
- EditText中输入手机号码时,自动添加空格
输入手机号码时,自动添加空格,更容易辨别 public class PhoneWatcher implements TextWatcher { private EditText _text; publ ...
- 编辑时snapping的添加
原文 编辑时snapping的添加 注意需要在编辑模式下进行snapping的添加(也即先需要使用IEngineEditor进入编辑状态): IMapControl3 mMap = (IMapCont ...
随机推荐
- C#:使用UPnP来穿透NAT使内网接口对外网可见
在写完Object 672后,软件的一个致命问题暴露出来,如果服务器和客户端都在内网环境下,即双方都通过NAT来接触外网,那么此时客户端是无法直接和服务器交流的. 解决方案可以是: 1:把服务器部署在 ...
- VS2005环境下的DLL应用
VS2005环境下的DLL应用 作者:一点一滴的Beer http://beer.cnblogs.com/ 以前写过一篇题为<VC++的DLL应用(含Demo演示)>的文章,当时是刚开始接 ...
- 异常:java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlType
这个是jdK版本的问题的. 本地编译的jar包是1.8的,但是跑jar包的环境jdk版本是1.9的. 升级1.9之后由于jdk当方面的取消了几个jar,所以导致编译起不来. 明天研究一下如何添加jar ...
- Ext.window.Window
var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口" ...
- rtsp/rtp over http
转载:http://linux-expert.blog.163.com/blog/static/764585292008530912712/ rtsp/rtp over http C->S (g ...
- explain之三:MYSQL EXPLAIN语句的extended 选项学习体会,分析诊断工具之二
MySQL 的explain命令有一个extended选项,我想可以很多人都没有注意,因为它对命令的输出结果没有任何改变,只是增加了一个warning.这个 warning中显示了MySQL对SQL的 ...
- SpringBoot自动化配置之三:深入SpringBoot:自定义EnableAutoConfiguration
前言 上面几篇文章介绍了SpringFramework的一些原理,这里开始介绍一下SpringBoot,并通过自定义一些功能来介绍SpringBoot的原理.SpringBoot在SpringFram ...
- idea右键单击没有 svn选项处理办法
问题一: IntelliJ IDEA打开带SVN信息的项目不显示SVN信息,项目右键SVN以及图标还有Changes都不显示解决方法 在VCS菜单中有个开关,叫Enabled Version Cont ...
- Celery-4.1 用户指南: Configuration and defaults (配置和默认值)
这篇文档描述了可用的配置选项. 如果你使用默认的加载器,你必须创建 celeryconfig.py 模块并且保证它在python路径中. 配置文件示例 以下是配置示例,你可以从这个开始.它包括运行一个 ...
- python 函数对象、函数嵌套、名称空间与作用域、装饰器
一 函数对象 一 函数是第一类对象,即函数可以当作数据传递 1 可以被引用 2 可以当作参数传递 3 返回值可以是函数 3 可以当作容器类型的元素 二 利用该特性,优雅的取代多分支的if def fo ...