Jquery做动态效果,可以使用animate函数,
animate(params[,duration[,easing[,callback]]])
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。
注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
下面一个简单的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>
演示请看:
http://www.fvzone.com/jquery/demos/fade.html
分享到:
相关推荐
**jQuery 实例演示及动态效果** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。在"jQuery实例演示及动态效果"中,我们可以找到一系列示例,涵盖了多种jQuery的...
在本文中,我们将深入探讨如何使用jQuery库来创建动态背景效果。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,从而让网页开发变得更加高效。对于想要为网站增添...
具体到这个压缩包,其内的“jquery动态头像效果”可能是一个完整的HTML文件、CSS文件和JavaScript文件组合,演示了如何用jQuery创建动态头像效果。HTML文件包含了头像元素和其他必要的结构;CSS文件则定义了样式规则...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
这篇博客“关于用jQuery实现效果”很可能是分享如何使用jQuery来创建各种网页动态效果的教程。虽然没有具体的描述,但我们可以根据标题推测其内容可能涵盖了jQuery的基础知识以及一些实用技巧。 首先,jQuery的核心...
接下来,要实现动态效果,可以使用`animate()`函数。这个函数允许我们平滑地改变一个或多个CSS属性,在指定的时间内形成动画效果。例如,要让字体大小在20px和40px之间跳跃,可以这样做: ```javascript $("#...
在网页设计和开发中,动态效果的运用可以提升用户体验,其中淡入淡出效果是最常见的动画之一。`jQuery`库以其丰富的功能和简洁的API,使得实现这类效果变得轻而易举。`jQFader`是一个专为jQuery设计的轻量级插件,它...
"jQuery动态数字翻滚计数到指定数字的文字特效代码"是一个常见的需求,尤其在显示实时更新的数据或者统计数据时。这种效果通常用于网站的访问量统计、股票价格、拍卖竞价等场景,给人一种生动、实时的感觉。 实现这...
《jQuery效果演示.zip》是一个与前端开发相关的压缩文件,其中包含了一个名为“选择器实验报告”的文档,很可能是对jQuery选择器使用的详细分析和实践总结。jQuery是JavaScript库中的一个强大工具,它简化了DOM操作...
对于网页中的图像展示,尤其是图片列表的交互,jQuery提供了丰富的功能和方法,使得开发者能够轻松地创建出吸引用户的动态效果。 1. **滑动切换** 这种效果常用于轮播图,通过平滑地左右滑动显示下一张或上一张...
在本文中,我们将深入探讨`marquee.js`插件,这是一个强大的JavaScript工具,用于实现各种jQuery滚动效果。`marquee.js`是专门为那些希望在网站上添加动态、吸引人的滚动效果的开发者设计的。它兼容了jQuery库,为...
"利用jQuery技术实现网页订单弹幕效果特效代码渐隐渐现效果带演示"是一个针对电商网站或购物网站的创新设计,它能让用户在浏览页面时看到实时的订单动态,如“某某购买了什么产品”,这种效果可以增加网站的活跃度和...
本资源“jquery动态增减选项卡.rar”聚焦于利用jQuery实现动态的选项卡(Tab)功能,这在网页设计中非常常见,用于组织和展示大量信息。选项卡通常用于将页面内容分割成多个部分,每个部分都有一个单独的标签来标识...
在本案例中,我们将探讨使用jQuery实现8种不同的瀑布流效果,这将涵盖各种布局风格和动态加载策略。 1. **基础瀑布流布局** jQuery实现的基础瀑布流布局通常基于CSS Flexbox或Grid布局。通过设置元素的宽度和垂直...
jQuery动态统计图形插件是JavaScript库中的一个工具,主要用于创建互动性和可视化的数据展示。jQuery本身是一个强大的JavaScript库,简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。结合动态统计图形插件...
使用canvas元素和jQuery来创建动态粒子效果,粒子随机移动或形成特定形状,提供一种现代且引人入胜的加载体验。 5. **文字动画加载** 把"Loading"或者其他提示文字作为动画对象,通过改变文字的透明度、大小或...
7. **示例代码**:在`jquery title提示效果.htm`文件中,可能包含了一个完整的HTML页面,演示了如何应用上述技术实现自定义的提示效果。你可以打开此文件,查看并学习其中的HTML结构、jQuery代码和CSS样式。 通过...
jQuery动态背景导航菜单是一种增强用户体验的交互式设计技术,通过结合CSS、JavaScript和jQuery库,可以实现更生动、更具吸引力的导航效果。在这个"jQuery动态背景导航菜单网页特效.zip"压缩包中,包含了实现这种...
jQuery 动画功能强大,`$(selector).fadeIn()`, `$(selector).slideUp()`, `$(selector).animate()`等方法可以创建平滑的过渡效果,使得网页更具动态感。 **五、AJAX操作** jQuery的`$.ajax()`函数简化了异步数据...