首页 / JQUERY / jQuery动画特效实例教程
jQuery动画特效实例教程
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery动画特效实例教程,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2959字,纯文字阅读大概需要5分钟。
内容图文
![jQuery动画特效实例教程](/upload/InfoBanner/zyjiaocheng/362/f7b75b6e918144af92d44117e1c23fc1.jpg)
本文以实例形式详细讲述了jQuery动画特效的实现方法。分享给大家供大家参考之用。具体方法如下:
1.自制折叠内容块
内容块如下:
<div class="module"> <div class="caption"> <span>标题</span> <img src="rollup.gif" alt="rollup" title="rolls up this module"/> </div> <div class="body"> 近日,《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧,恒大统治力比上赛季下降了很多,恒大外援存在位置重叠的问题,客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武,恒大的惹不起不过尔尔,恒大失去了对其它球队压倒性的优势,能力下降是恒大霸主地位有所动摇的根源所在。 </div> </div>
给img元素绑定点击事件。
$(function() { $('div.caption img').click(function () { //先找到img的父级元素,再找该父级元素的子元素 var $body = $(this).closest('div.module').find('div.body'); if ($body.is(':hidden')) { $body.show(); } else { $body.hide(); } }); });
运行效果如下图所示:
切换元素的显示状态,还可以用toggle方法。
$(function() { $('div.caption img').click(function () { $(this).closest('div.module').find('div.body').toggle(); }); });
以上是没有动画效果的,有时候感觉会很唐突。实际上,show,hide,toggle方法都可以有动画效果。比如:
$(function() { $('div.caption img').click(function () { $(this).closest('div.module').find('div.body').toggle('slow'); }); });
又比如:
$(function() { $('div.caption img').click(function () { $(this).closest('div.module').find('div.body').toggle('slow', function() { $(this).closest('div.module').toggleClass('rolledup', $(this).is(':hidden')) }); }); });
2.使元素淡入淡出
fadeIn(speed, callback) fadeOut(speed, callback) fadeTo(speed, opacity, callback)
3.上下滑动元素
slideDown(speed, callback) slideUp(speed, callback) slideToggle(speed, callback)
4.停止动画
stop(clearQueue, gotoEnd)
5.创建自定义动画
animate(properties, duration, easing, callback) $('.classname').animate({opacity:'toggle'},'slow')
如果写一个扩展函数。
$.fn.fadeToggle = function(speed){ return this.animate({opacity:'toggle'},'slow'); }
6.自定义缩放动画
$('.classname').each(function(){ $(this).animate({ width: $(this).width() * 2, height: $(this).height() * 2 }); });
7.自定义掉落动画
$('.classname').each(function(){ $(this) .css("position","relative") .animate({ opacity: 0, top: $(window).height() - $(this).height() - $(this).position().top },'slow',function(){ $(this).hide(); }) });
8.自定义消散动画
$('.classname').each(function(){ var position = $(this).position(); $(this) .css({ position: 'absolute', top: position.top, left:position.left }) .animate({ opacity: 'hide', width: $(this).width()*5, height: $(this).height()*5 top: position.top - ($(this).height() * 5 / 2), left: position.left - ($(this).width() * 5 /2) },'normal'); });
9.队列中的动画
//动画插入队列 $('img').queue('chain', function(){}); $('img').queue('chain', function(){}); $('img').queue('chain', function(){}); $('img').queue('chain', function(){}); $('button').click(function(){ $('img').dequeue('chain'); //删除队列中的动画 }) cleaeQueue(name)//删除所有未执行的队列中的动画 delay(duration, name)//为队列中所有未执行的动画添加延迟
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。
内容总结
以上是互联网集市为您收集整理的jQuery动画特效实例教程全部内容,希望文章能够帮你解决jQuery动画特效实例教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。