`

jQuery 效果学习 之 滑动

阅读更多
jQuery 滑动函数 - slideDown, slideUp, slideToggle

jQuery 拥有以下滑动函数:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

slideDown() 实例
$(".flip").click(function(){
$(".panel").slideDown();
});


slideUp() 实例
$(".flip").click(function(){
$(".panel").slideUp()
})


slideToggle() 实例
$(".flip").click(function(){
$(".panel").slideToggle();
});


jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数:
$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。

fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

fadeTo() 实例
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});


fadeOut() 实例
$("button").click(function(){
$("div").fadeOut(4000);
});
分享到:
评论

相关推荐

    jquery滑动图片效果

    **jQuery滑动图片效果详解** 在网页设计中,动态效果总是能吸引用户的注意力,其中滑动图片效果是一种常见的展示方式,常用于首页信息展示或产品轮播。本篇将深入探讨如何利用jQuery库来实现这一功能。 jQuery是一...

    jQuery鼠标经过图片背景滑动切换效果.zip

    《jQuery鼠标经过图片背景滑动切换效果实现详解》 在网页设计中,动态效果往往能够提升用户体验,使得网站更具吸引力。本篇文章将深入探讨如何利用jQuery库实现一个鼠标经过图片时,图片背景滑动切换的特效。这个...

    jQuery实现标题滑动框效果

    通过理解上述步骤和jQuery的用法,你可以根据需求自定义标题滑动框效果,比如改变滑动方向、添加缓冲效果或者与其他交互元素联动。不断实践和探索,你将能够熟练掌握jQuery实现的各种动态效果。

    jquery选择卡/滑动门效果(解决了恶意滑动, 资源加载等待)

    通过这个自制的滑动门实例,我们可以学习到如何使用jQuery构建动态交互的网页组件,并了解到解决实际开发中遇到的问题,如性能优化和用户行为控制的重要性。对于初学者来说,这是一个很好的实践项目,有助于加深对...

    jQuery 图片展示 图片滑动 滑动div 鼠标滚轮

    7. **优化性能**:为了提高用户体验,应确保只在需要时才执行滑动效果,例如,当鼠标位于图片容器之上时。同时,避免在滚动事件中进行重计算,因为滚动事件可能触发频繁,这可能导致性能问题。 综上所述,实现...

    jQuery和css3滑动显示面板特效插件

    在IT领域,jQuery和CSS3是两种非常...开发者可以通过研究这个插件的源代码,学习如何利用jQuery和CSS3来创建类似的动态效果,提升自己的前端开发技能。无论是对于初学者还是有经验的开发者,这样的实践都是极有价值的。

    jQuery车门滑动效果菜单.rar

    《jQuery车门滑动效果菜单实现详解》 在网页设计中,吸引用户的交互元素往往能够提升用户体验,增强网站的吸引力。"jQuery车门滑动效果菜单"就是这样一个创新的交互设计,它通过模拟车门开启的动画效果,使得网页...

    jquery滑动

    标题中的“jquery滑动”指的是使用jQuery库来创建平滑的元素滚动或滑动效果,...通过以上内容的学习和实践,你可以熟练掌握使用jQuery和Sequence.js创建流畅滑动效果的技术,为网页增添生动的动态元素,提高用户体验。

    jQuery图文卡片列表左右滑动轮播代码

    在本项目中,jQuery被用来监听用户的滑动事件,控制轮播的前进和后退,以及实现平滑的过渡效果。 **HTML5**是下一代超文本标记语言,提供了更多的语义化标签,如`<section>`、`<article>`等,这有助于提升网页结构...

    jQuery三级滑动菜单

    四、jQuery实现滑动效果 在jQuery中,可以通过事件监听来控制子菜单的显示和隐藏。例如,当鼠标悬停在一级菜单上时,显示对应的二级菜单: ```javascript $(".menu > li").hover(function() { $(this).children("ul...

    jquery滑动组合相册效果.zip

    通过学习和掌握以上这些jQuery和Web开发相关知识,你可以创建出具有专业级滑动组合相册效果的网页。在实际应用中,还需要根据项目需求调整和定制代码,以满足个性化需求。同时,不断学习和了解最新的前端技术和趋势...

    jquery触摸滑动图片实例学习用修改难

    针对触摸滑动图片的需求,我们需要实现图片轮播或滑动效果。这通常包括左右滑动切换图片、自动播放、添加指示器等功能。在jQuery中,我们可以利用`swipe`或`touchstart/touchmove/touchend`等触摸事件来捕捉用户的...

    JQUERY图片滑动特效

    在网页设计中,jQuery是一种广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得创建交互...通过学习和实践,你可以创建出与迅雷首页类似、引人入胜的图片滑动效果,为你的网站增加互动性和视觉冲击力。

    jquery实现的图片滑动并带有放大镜效果代码.rar

    这个“jquery实现的图片滑动并带有放大镜效果代码.rar”压缩包文件,显然包含了一个使用jQuery创建的图片展示功能,该功能不仅能够实现图片的滑动展示,还具有放大镜效果,以便用户可以更清晰地查看图片的细节。...

    『HTML5制作仿JQuery效果』滑动

    JQuery中的滑动效果通常包括元素的淡入淡出、滑动显示或隐藏等,这些效果使得网页具有更好的用户体验。 Lufylegend是一个基于HTML5的开源游戏引擎,它不仅用于游戏开发,也可以用于创建交互性强的网页应用。这个...

    jquery类似flash效果动感纵向滑动背景导航菜单

    "jQuery类似Flash效果动感纵向滑动背景导航菜单"就是一个旨在实现这种效果的技术实践。jQuery,作为一款强大的JavaScript库,以其简洁的API和丰富的插件深受开发者喜爱,它允许我们在不编写大量原生JavaScript代码的...

    jquery的列表滑动效果

    在本文中,我们将深入探讨如何使用jQuery实现列表滑动效果,这一效果常见于网页上的轮播图、选项卡或滚动导航等元素。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得开发者能够快速...

    jQuery仿腾讯视频图片滑动门切换效果

    通过学习和实践这些知识点,你可以创建出一个类似腾讯视频的图片滑动门切换效果。在实际应用中,你可能还需要考虑兼容性问题,以及如何在不同屏幕尺寸下适配效果,以确保在各种设备上都能良好运行。记得在编写代码时...

    jquery mobile左右滑动效果

    标题提到的“jquery mobile左右滑动效果”是jQuery Mobile中一个重要的交互功能,主要用于增强用户在手机或平板设备上的浏览体验。下面将详细阐述这一功能及其实现原理。 首先,jQuery Mobile的核心在于其触摸事件...

    jQuery鼠标点击图片滑动切换特效.zip

    在本文中,我们将深入探讨如何使用jQuery实现鼠标点击图片滑动切换的特效。这个特效是JavaScript(JS...通过学习和实践这个例子,开发者可以更好地理解jQuery在动态网页设计中的应用,并能够创建更多吸引人的交互效果。

Global site tag (gtag.js) - Google Analytics