JQuary效果（自定义动画，王者荣耀效果案例）

一，自定义动画

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()

语法规范如下：

1，语法

animate(params,[speed],[easing],[fn])

2,参数

（1），params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

（2），speed：三种预定速度之一的字符串（“slow”,"normal" ,or"fast"）或表示动画时长的毫秒数值（如：1000）

（3），easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”

（4），fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

 $(function(){$("#content").mouseover(function(){$(this).css("background","url(img/c.png)").animate({//属性值的变化，时间，动画效果，动画完成之后的回调函数width:224,height:69,},1000);});});

二，停止动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果的排队执行。

停止动画排队的方法为：stop（）；

》stop()方法用于停止动画或效果

》stop()写到动画或者效果的前面，相当于停止结束上一次的动画

总结：每次使用动画之前，先调用stop(),再调用动画

三，事件切换

JQuery中为我们添加了一个新事件hover()：功能类似css中的伪类:hover 介绍如下：

语法：

hover([over,]out)//其中over和out为两个函数

》over:鼠标移到元素上触发的函数（相当于mouseenter）

》out:鼠标移出元素要触发的函数（相当于mouseleave）

》如果只写一个函数，则鼠标经过和离开都会触发它

王者荣耀效果案例

实现一个这样的效果，鼠标滑动到头像位置则与他对应的任务简介出现

代码步骤

第一步：先分析布局结构

<div id="count"><ul><li class="count1"><img src="img/c1.jpg" class="smile"/>//插入的头像小图片<img src="img/c1.png" class="big"/>//插入的人物简介大图片</li><li><img src="img/c2.jpg"  class="smile"/><img src="img/c2.png" class="big/"></li><li><img src="img/c3.jpg" class="smile"/><img  src="img/c3.png"class="big/"></li><li><img src="img/c4.jpg" class="smile"/><img  src="img/c4.png"class="big/"></li><li><img src="img/c5.jpg" class="smile"/><img  src="img/c5.png"class="big/"></li><li><img src="img/c6.jpg" class="smile"/><img  src="img/c6.png"class="big/"></li><li><img src="img/c7.jpg" class="smile"/><img  src="img/c7.png"class="big/">//七组图片</li></ul></div>

第二步：css样式

*{margin: 0px;padding: 0px;list-style: none;}#count{width:900px;height:69px;margin: auto;background: url(img/w.png);}#count ul li{width:69px;height: 69px;float: left;overflow: hidden;margin-left: 10px;border-radius: 5px;/设置圆角//*     border: 1px red solid; */}#count ul .count1{width: 224px;}.count1.big{display: block;}.count1.smile{display: none;}.smile{width: 69px;height: 69px;}.big{display: none;}

第三步：鼠标滑动时的事件实现的效果

  $(function() {//当鼠标移动时实现下面操作$("#count ul li").mouseover(function() {$(this).animate({width: 224,}).siblings().animate({width: 69,})$(this).find(".big").stop().fadeIn();//大图片显示小图片隐藏$(this).find(".smile").stop().fadeOut();//小图片显示大图片隐藏$(this).siblings().find(".big").stop().fadeOut();//除了当前图片显示大图片其他大图片隐藏小图片显示$(this).siblings().find(".smile").stop().show();//除了当前小图片不显示其他小图片显示})

JQuary效果（自定义动画，王者荣耀效果案例）相关推荐

jQuery自定义动画王者荣耀手风琴效果
分析: ①鼠标经过某个小li 有两步操作: ②当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 ③其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 <!doctyp ...
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
jQuery动画效果（王者荣耀手风琴案例）
自定义动画: 自定义动画非常强大,通过参数的传递可以模拟以上所有动画,方法为:animate() (1)语法: animate(params,[speed],[easing],[fn]) (2)参数: ...
jQuery-动画效果（王者荣耀手风琴案例）
王者荣耀手风琴案例,如下图所示: 该效果为王者荣耀官网上面的效果,下面我们将实现这个效果. 结构分析: 静态页面实际上是ul标签下面包含了7个小li标签,然后每一个小li标签下面有两张图片,一个为表面 ...
php动画效果,自定义动画效果自定义动画效果
摘要: jQuery的动画效果--自定义动画 jQuery的动画效果--自定义动画 div{width: 200px;height: 200px;background:blue;position ...
前端学习笔记-jQuery-jQuery动画（王者荣耀手风琴案例）
案例:王者荣耀手风琴分析: 鼠标经过某个小li 有两步操作: 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 ...
jQuery实现王者荣耀手风琴案例（知识块讲解+案例）
前言: 这个案例是几年前的了,现在的王者官网是没有这个手风琴模块的,我了解到这个案例,是受到了黑马程序员知名教师--pink老师的启发,我相信大家也都不陌生,同样也是我非常尊敬的一位老师,我就不做过多 ...
vue动画效果-定义动画帧过度效果集成第三方动画animate.css
1.定义动画帧 <template><div><button @click="isShow=!isShow">显示/隐藏</button& ...
jQuery快速入门（淘宝切换服饰、王者荣耀手风琴效果）
一.什么是jQuery jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. 二. ...

JQuary效果（自定义动画，王者荣耀效果案例）

JQuary效果（自定义动画，王者荣耀效果案例）相关推荐

最新文章

热门文章