JQuery学习(7)动画
2013-05-06 15:35
218 查看
首先 最常用的 hide show
slide
animate
$(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); }) })
相关文章推荐
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- 学习笔记——jQuery自定义动画
- jQuery学习笔记之jQuery动画效果
- JQuery学习笔记-JQuery的动画效果
- jQuery学习教程(九):动画
- React学习笔记:使用jquery实现动画效果淡入淡出
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- JQuery学习笔记-JQuery的动画效果
- jquery学习笔记(三)事件和动画
- MVC学习添加jQuery动画
- jquery学习笔记----隐藏、显示、切换,滑动,淡入淡出,以及动画
- jQuery学习教程(九):动画
- 从零开始学习jQuery (七) jQuery动画实现 让页面动起来
- jquery学习第十二番 动画
- jQuery在学习之四、jQuery事件与动画
- [php学习十七]JQuery练习2-动画
- jquery学习笔记-----事件和动画
- jQuery学习之旅 Item9 动画效果
- 前端学习 jQuery动画 show Hide
- Jquery选择器的概念以及选择器的学习一(基本、层级、简单,另有简单动画效果代码)