动画执行JQuery学习(7)动画
2013-05-06 20:42
309 查看
本文是一篇关于动画执行的帖子
首先 最用常的 hide show
slide
fade
每日一道理
听,是谁的琴声,如此凄凉,低调的音,缓慢的节奏,仿佛正诉说着什么。音低调得略微有些抖动,听起来似乎心也有些抖动,我感觉到一种压抑的沉闷气息,是否已凝结在这空气中……
animate
文章结束给大家分享下程序员的一些笑话语录: 一位程序员去海边游泳,由于水性不佳,游不回岸了,于是他挥着手臂,大声求.救:“F1,F1!”
首先 最用常的 hide show
$(function () { $('#spinfo').click(function () { if ($(this).text() == '隐藏') { $('#divcontent').hide(2000, function () { $('#spinfo').text('示显'); }); } else { $('#divcontent').show(2000, function () { $('#spinfo').text('隐藏'); }); } }) })
slide
$(function () { $('#Button1').bind('click', function () { $('img').slideUp(2000); }) $('#Button2').bind('click', function () { $('img').slideDown(2000); }) $('#Button3').bind('click', function () { $('img').slideToggle(2000); }) })
fade
每日一道理
听,是谁的琴声,如此凄凉,低调的音,缓慢的节奏,仿佛正诉说着什么。音低调得略微有些抖动,听起来似乎心也有些抖动,我感觉到一种压抑的沉闷气息,是否已凝结在这空气中……
<script type="text/javascript"> $(function () { $('#Button1').bind('click', function () { $('img').fadeOut(2000, function () { $('#Button1').val('哎,没了'); }); }) $('#Button2').bind('click', function () { $('img').fadeIn(2000, function () { $('#Button2').val('有了'); }); }) $('#Button3').bind('click', function () { $('img').fadeTo(2000, 0.3, function () { alert('动画执行终了'); }); }) }) </script>
animate
$(function () { $('img').click(function () { //$('img').css({width:'500px',height:'500px'}); //$('img').animate({width:'500px',height:'500px'}, 2000); $(this).animate({ width: '500px' }, 2000).animate({ height: '500px' }, 2000).animate({ left: '+=100px' }, 2000).animate({ top: '-=100px' }, 2000); }) $('#Button1').click(function () { $('#spinfo').animate({ fontSize: '40px' }, 2000); }) //止停动画 $('#Button2').click(function () { //$('#spinfo').stop(); //当一个元素有一个动画队列时,止停的只是以后正在执行的动画,面后的动画还会继承执行 $('img').stop(); }) $('#Button3').click(function () { $('img').delay(2000).hide(2000); }) })
文章结束给大家分享下程序员的一些笑话语录: 一位程序员去海边游泳,由于水性不佳,游不回岸了,于是他挥着手臂,大声求.救:“F1,F1!”
相关文章推荐
- jQuery学习二-动画回调和多个动画执行
- jQuery学习笔记 —— 4. 动画
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- jquery学习笔记(三)事件和动画
- JQuery学习笔记之自定义动画效果
- 分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
- jquery学习笔记-----事件和动画
- jQuery学习笔记 - 1 页面框架下载完毕后执行逻辑 文本框 单选框 复选框
- jquery 动画学习基础2
- jQuery学习之旅 Item9 动画效果
- jquery学习第十一番 事件和动画
- JQuery学习笔记-JQuery的动画效果
- jQuery 动画的执行
- jQuery框架学习第七天:jQuery动画–jQuery让页面动起来!
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- jquery学习笔记----隐藏、显示、切换,滑动,淡入淡出,以及动画
- 一步一步学习 JQuery (八) JQuery 的动画效果
- 事件执行JQuery学习(5)事件(2)-java教程
- jquery学习第二天:超链接title提示效果、图片放大提示效果、内容展开收缩动画效果
- JQuery学习笔记(4)JQuery中的事件和动画