/* 特效 */
$(document).ready(function(){
$("#input_id2").click(function(){
/*层的隐藏特效*/
$("#div_id1").hide(500,function(){});
/* 层的显示 */
$("#div_id1").show(1000,function(){});
/* 层的交替显示隐藏 normal, slow , fast*/
$("#div_id1").toggle("normal",function(){});
/* 向上收缩 */
$("#div_id1").slideUp(1000,function(){});
/* 向下展开 */
$("#div_id1").slideDown(1000,function(){});
/* 交替向上向下展示 */
$("#div_id1").slideToggle(1000,function(){});
/* 淡入效果 */
$("#div_id1").fadeIn(2000,function(){});
/* 淡出效果 */
$("#div_id1").fadeOut(2000,function(){});
/* 淡出到某个透明度效果 */
$("#div_id1").fadeTo(2000,0.5);
});
});
/* 动画*/
$(document).ready(function(){
$("#input_id11").click(function(){
/* 动画-改编字体样式 */
$("#div_id1").animate({width: "70%",height: "100%",fontSize: "4em"},1000);
/* 用动画-实现层的显示隐藏 */
$("#div_id1").animate({height:'toggle',opacity:'toggle'},"slow");
});
});
/* 队列动画 -- 函数中包含了3个动画,逐步进行,共花费3000毫秒事件*/
$(document).ready(function(){
$("#input_id11").click(function(){
$("#div_id1").animate({width: "70%"},1000)
.animate({height: "100%"},1000)
.animate({fontSize: "4em"},1000);
});
});
/* 非队列动画 -- 函数中包含了3个动画,一起进行,共花费1000毫秒事件*/
$(document).ready(function(){
$("#input_id11").click(function(){
$("#div_id1").animate({width: "70%"},{quene:false,duration:1000})
.animate({height: "100%"},{quene:false,duration:1000})
.animate({fontSize: "4em"},{quene:false,duration:1000});
});
});
分享到:
相关推荐
本主题聚焦于"jquery数字增加动画特效",这是一个在网页上展示数值变化时常用的视觉效果,可以使得数据更新过程更加生动有趣。 在jQuery中,实现数字增加动画特效通常涉及到几个关键知识点: 1. **基本使用**: ...
"jQuery特效圣诞雪花"就是一个典型的例子,它利用jQuery库来实现一种节日氛围的动画效果,让网页背景飘落雪花,营造出冬日圣诞节的场景。 jQuery是一个广泛使用的JavaScript库,它的API简洁易用,使得开发者能轻松...
在本文中,我们将深入探讨如何使用jQuery来实现一个生动的心电图动画特效,这将涉及到JavaScript编程、CSS样式以及HTML结构。心电图动画特效在许多网页设计中被用来增加视觉吸引力,尤其适用于医疗健康、健身或科技...
这个名为"jQuery特效和实例集合"的压缩包,包含了50多个精心设计的jQuery特效以及50个JS实例,为学习者提供了丰富的实践素材。接下来,我们将深入探讨这些知识点,领略jQuery的魅力。 一、jQuery基础 jQuery的核心...
jQuery是一个广泛应用于网页开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在"jQuery loading加载动画特效"中,我们主要探讨的是如何利用jQuery来实现页面加载时的动态...
本资源包含100个常用的jQuery特效和插件,旨在帮助开发者提升网页的用户体验和视觉效果。 1. **选择器与遍历**: jQuery提供了强大的选择器,如ID选择器(#id),类选择器(.class)和元素选择器(element),以及组合...
"非常炫酷的jQuery图片文字动画切换特效"是一个专为网站横幅Banner设计的交互式组件,它结合了图片与文字,通过jQuery库实现了丰富的动画切换效果,旨在使网站更加生动、引人入胜。这种特效尤其适用于产品展示、新闻...
在学习过程中,应先从基础入手,理解jQuery的选择器、DOM操作和事件处理,然后逐步进阶到动画和Ajax部分。对于每个特效,不仅要学会如何实现,还要思考其背后的原理和优化手段。同时,不要忽视性能优化,合理使用...
【jQuery波浪文字动画特效】是一种使用JavaScript库jQuery创建的创新文字展示方式,它通过动态的视觉效果,使文本在页面上呈现出波浪般的流动感,为网站或应用的用户体验增添趣味性和吸引力。这种特效主要适用于标题...
jQuery制作的Loading动画特效是网页开发中常见的交互元素,它能提供一种视觉反馈,让用户知道网页正在加载数据或内容。这种动画效果可以帮助提高用户体验,减少因等待时间过长而产生的不耐烦感。在本教程中,我们将...
CSS3是CSS(层叠样式表)的最新版本,引入了许多新的特性和功能,尤其是动画和过渡效果。在本项目中,CSS3被用来创建各种动态加载效果,如旋转、缩放、颜色变化等。这些效果可以通过CSS3的关键帧动画(@keyframes)...
总的来说,"30种jQuery悬停按钮动画特效"不仅提供了丰富的视觉效果,也是一份宝贵的教育资源,帮助开发者提升JavaScript和jQuery的技能,创造出更具吸引力的网页交互元素。对于想要提升网页设计水平的开发者来说,这...
在流星雨动画特效中,jQuery的主要作用是控制流星的运动轨迹、速度和消失时间,使得动画流畅且易于调整。 CSS3在流星雨动画中扮演了关键角色。通过CSS3的`transform`属性,可以实现流星的移动和平移,而`animation`...
jQuery庞大的社区孕育了无数优秀的插件,如轮播图(carousel)、滚动监听(scroll)、提示信息(tooltip)等,这些插件极大地丰富了jQuery特效的种类和应用范围。 总结,jQuery特效是前端开发中的重要工具,它使得...
总结来说,"jQuery网页波浪文字动画特效"是通过结合HTML、CSS和jQuery的强大力量来创建的一种动态视觉效果。它展示了如何利用现有的Web技术来提升用户体验,同时也为开发者提供了实现个性化动画效果的可能性。在实际...
【jQuery经典特效26】:jQuery动画背景滑动切换效果是一...文件列表中的`Jquery特效资源分享.txt`可能包含更多相关资源和代码示例,而`201`可能是另一个相关文件,如CSS或JavaScript文件,用于实现这个特效的具体细节。
jQuery作为一种轻量级的JavaScript库,因其简洁的API和丰富的功能,常被用来实现各种交互效果,包括导航条的动画特效。"jQuery导航条动画特效.zip"这个压缩包就是专门针对这一主题的资源集合,包含了一个示例文件...
"jQuery卷轴打开动画特效.zip" 是一个包含jQuery实现的滚动条动画效果的资源包,适用于网页设计者和开发者,以提升用户体验。 这个资源包包括以下四个文件: 1. **index.html**:这是网页的主文件,其中包含了HTML...
总的来说,"jQuery文字动画特效插件"结合jQuery和animate.css,为开发者提供了一种简单易用的方式,来创建吸引眼球的文字动画效果,为网页增添更多动态美。在实际应用中,开发者可以根据需求灵活调整,创造出独特且...
jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。在这个3D星空动画特效中,jQuery可能被用来: 1. **页面加载后执行初始化操作**:jQuery的$(document).ready()函数确保在...