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函数学习记录
很久之前就对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使用animate创建动画用法实例
本文实例讲述了jQuery使用animate创建动画用法.分享给大家供大家参考.具体如下: animate的用法: animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )用于创建自定义动画的函数. 实例运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
jQuery插件animateSlide制作多点滑动幻灯片
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片--全屏动画animateSlide(代码完全原创). 直接上代码,把html.css和jquery代码copy到页面上即可呈现完美画面. html代码如下: <div class="animateSlide"> <div class="animateSlideImgWrap"> <div class=&quo
-
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的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的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方法实现控制元素移动.分享给大家供大家参考.具体分析如下: 通过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()
在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行.但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash.这里 说的取代是网页特效部分,而不是动画.网页特效比如:渐变菜单.渐进显示.图片轮播等:而动画比如:故事情节广告.MV 等等. 如果复制当前代码进行在本地测试的时候,请注意把不需要(其他功能展示)的代码注释掉. <!DOCTYPE html> <html xmlns="http://www.w3.org/1
-
jQuery中animate动画第二次点击事件没反应
用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,
随机推荐
- JSONP之我见
- 一个简单的ajax上传进度显示示例
- PHOTOSHOP技巧167条
- 浅析C++中memset,memcpy,strcpy的区别
- 利用javascript实现一些常用软件的下载导航
- 如何动态加载外部Javascript文件
- EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
- Python基础知识_浅谈用户交互
- JAVA POST与GET数据传递时中文乱码问题解决方法
- 深入解析C语言中的内存分配相关问题
- 为什么Node.js会这么火呢?Node.js流行的原因
- SSI指令
- jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
- Struts2学习笔记(8)-Result常用类型
- 基于c# 类、接口、结构的联系与区别详解
- Centos系统下“无法打开并写入文件”问题的解决
- vue中如何让子组件修改父组件数据
- c语言 sscanf,scanf,fscanf正则表达式用法
- 易语言更改编辑框内文字字体的介绍
- C#网站生成静态页面的实例讲解