目录

前言

一、案例展示

三、代码实现

总结

前言

本案例会使用jQuery动画来实现一个简单的手风琴效果。

一、案例展示

页面打开后，初始页面如下：

当鼠标滑过这个蓝色的方块的时候，蓝色方块的状态就会发生如下图所示的变化，同理当鼠标滑到其他颜色的方块也会发生同样的效果，不仅大小会改变同时方块的颜色也会跟着发生变化：

当我们添加图片后还可以形成像王者荣耀如戏图所示的这样的效果：

二、案例分析，如何实现

在手风琴效果案例的实现，我们用到了jQuery动画，需要用到jQuery中的fadeIn()和fadeOut()等动画方法，以及鼠标指针进入事件mouseover。我们捋一捋手风琴效果的实现思路：

（1）首先是要布局，在布局的时候我们用到<li>、<ul>和<div>等基本标签；编写手风琴的页面布局以及CSS样式等，同时为了更好的展示效果和更加美观，需要设置大小方块的颜色以及大小。

（2）然后通过jQuery实现交互效果，当鼠标指针滑到小方块的时候触发鼠标指针移入事件。利用选择器获取页面中的小方块时，用fadeIn()和fadeOut()来控制方块的隐藏和显示。

三、代码实现

<script>// 鼠标指针经过某个li$(".king li").mouseenter(function () {// 当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入$(this).stop().animate({width: 224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();// 其余兄弟li宽度变为69px，小图片淡入，大图片淡出$(this).siblings("li").stop().animate({width: 69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();});</script>

需要注意的是一些动画效果实现的标签的使用，如：

stop()用来结束上一次动画，执行本次动画，且必须写到动画的前面；

animate()是用来自定义动画的，要注意其中参数的设置，要更改的样式的设置，是以对象形式传递，还有透明度的设置；

还需要注意的就是div要设置绝对位置、链式编程的掌握、还有之前的一些筛选器，如find()的使用等等。

总结

通过浏览器测试，完成的效果图基本符合预期结果。这个案例主要是对jQuery的动画的学习以及运用了前面选择器的基础。

手风琴效果案例（jQuery）相关推荐

jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
手风琴效果（jQuery）
简单的手风琴效果实现实际比看起来简单,只是改变当前的元素宽度和其他元素的宽度,其代码如下(图片什么的都要换成自己噢) <!DOCTYPE html> <html lang=" ...
自定义动画 animate || 案例：王者荣耀手风琴效果分析
自定义动画 animate <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
jQuery快速入门（淘宝切换服饰、王者荣耀手风琴效果）
一.什么是jQuery jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. 二. ...
使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
园子中的朋友大家好.在上一篇文章中我们,给大家介绍了 Wijmo Menu 的特性及使用方法.感谢园子中朋友的支持,朋友们的支持给我们写这一系列文章提供了很大的动力.在这篇文章中我们将介绍 Accor ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
jQuery实现手风琴效果
jQuery实现手风琴效果,这里是纵向的,效果图如下: 在此处是当鼠标移动到p上面的时候,p下面的ol里面的内容显现出来主要用了html,css,jQuery的知识先把大致需要的东西写出来,此处用 ...
精心挑选12款优秀 jQuery 手风琴效果插件和教程
当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的 ...
jquery插件手风琴效果
利用插件实现手风琴效果,偶尔有点小收获哦!哈哈 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

手风琴效果案例（jQuery）

前言

一、案例展示

三、代码实现

总结

手风琴效果案例（jQuery）相关推荐

最新文章

热门文章