jQuery中animate用法实例分析
本文实例讲述了jQuery中animate用法。分享给大家供大家参考。具体如下:
这是一个简单的animate函数尝试。代码如下:
<script type="text/javascript"> $(document).ready(function(){ $(".side-box h3").toggle(function(){ $(this).addClass("box-arrow"); $(this).next(".side-text").animate({ height: 'toggle', opacity: 'toggle' }, "slow"); return false; },function(){ $(this).next(".side-text").animate({ height: 'toggle', opacity: 'toggle' }, "slow"); $(this).removeClass("box-arrow"); return false; }); }); </script>
希望本文所述对大家的jQuery程序设计有所帮助。
相关推荐
-
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
CSS3和jquery都可以实现缓动追逐效果,但是考虑到浏览器的兼容性,建议使用jquery animate方法来实现. 先给大家展示下实现效果如下: 效果演示 源码下载 引用文件: jquery-1.11.1.min.js html <div id="container"> <div id="first"></div> <div id="second"></div> &l
-
jquery使用animate方法实现控制元素移动
本文实例讲述了jquery使用animate方法实现控制元素移动.分享给大家供大家参考.具体分析如下: 通过jquery的animate方法控制元素移动,这里需要将元素的位置定义为relative, fixed, 或者 absolute! <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(docume
-
jQuery的animate函数实现图文切换动画效果
在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程. <div class="wrap"> <img src="images/s1.jpg" alt="photo" /> <div class="cover"> <h3>强震摧毁加勒比海小国海地</h3> <
-
jQuery中animate动画第二次点击事件没反应
用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,
-
JQuery动画animate的stop方法使用详解
animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css
-
jQuery使用animate创建动画用法实例
本文实例讲述了jQuery使用animate创建动画用法.分享给大家供大家参考.具体如下: animate的用法: animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )用于创建自定义动画的函数. 实例运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
jQuery的animate函数学习记录
很久之前就对jQuery animate的实现非常感兴趣,不过前段时间很忙,直到前几天端午假期才有时间去研究. jQuery.animate的每种动画过渡效果都是通过easing函数实现的.jQuery1.4.2中就预置了两个这样的函数: easing: { linear: function( p, n, firstNum, diff ) { return firstNum + diff * p; }, swing: function( p, n, firstNum, diff ) { retu
-
jQuery插件animateSlide制作多点滑动幻灯片
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片--全屏动画animateSlide(代码完全原创). 直接上代码,把html.css和jquery代码copy到页面上即可呈现完美画面. html代码如下: <div class="animateSlide"> <div class="animateSlideImgWrap"> <div class=&quo
-
jquery中animate的stop()方法作用实例分析
本文实例分析了jquery中animate的stop()方法作用.分享给大家供大家参考.具体分析如下: 这里以一个视频中的代码段告诉你stop()的作用: 代码如下: <style type="text/css"> ul li{ width:50px; height:30px; background:#333; margin-bottom:10px; color:#fff;} </style> <ul id="flyul"> &l
-
深入理解jquery自定义动画animate()
在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行.但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash.这里 说的取代是网页特效部分,而不是动画.网页特效比如:渐变菜单.渐进显示.图片轮播等:而动画比如:故事情节广告.MV 等等. 如果复制当前代码进行在本地测试的时候,请注意把不需要(其他功能展示)的代码注释掉. <!DOCTYPE html> <html xmlns="http://www.w3.org/1
随机推荐
- Powershell读取本机注册表中的所有软件关联扩展名
- MySQL 主主同步配置步骤
- Angular设置title信息解决SEO方面存在问题
- upfile上传漏洞的利用总结
- oracle 分页 很棒的sql语句
- Android seekbar(自定义)控制音量同步更新
- android中在Activity中响应ListView内部按钮的点击事件的两种方法
- 详谈 CSS样式表使用:链接/嵌入
- js 浏览器版本及版本号判断函数2009年
- php中adodbzip类实例
- 实现在同一方法中获取当前方法中新赋值的session值解决方法
- java实现猜数字小游戏
- Android应用开发中Fragment与Activity间通信示例讲解
- Android实现Ant Design 自定义表单组件
- Python排序搜索基本算法之归并排序实例分析
- axios全局请求参数设置,请求及返回拦截器的方法
- Android仿今日头条顶部导航栏效果的实例代码
- 如何写好一个vue组件,老夫的一年经验全在这了(推荐)
- flask入门之表单的实现
- 易语言去除重复文本方法