首先我们这会用到的知识点和需求：

1、要求使用hover和fade系列的方法完成此效果；
2、图片的初始透明度为0.4;
2、渐隐渐现的时长为300毫秒；

效果图如下

我么可以看到鼠标移到上面时改变透明度，并且只改变鼠标指针指到的那一个，

我们先用第一种普通的做法，

用透明度：opacity来做这道题，但是也有一定的缺点，等下就会发现。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;z-index: 0;}body{background-color: black;}ul{list-style: none;margin-top: 10px;}li{color: white;float: left;padding-left: 38px;padding-top: 25px;}#a{width: 750px;height: 500px;border: 3px solid white;margin: 0 auto;margin-top: 100px;}ul li img{width: 200px;height: 200px;opacity: 0.4;}.wrapper{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 999;background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-size: 25%;}</style><script src="../练习3：京东常见问题分类页面/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="a"><ul><li><img src="data:image/11.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/22.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/33.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/44.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/55.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/66.jpg" alt="" class="enlargeImg"/></li></ul>
</div>
<script>$(function (){$("ul li").hover(function (){$(this).stop().animate({"opacity":0.4})},function (){$(this).stop().animate({"opacity":1})})})
</script>
</body>
</html>

这个并没有按照要求去给他设置，接下来我们换一种方法来弄出效果。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;z-index: 0;}body{background-color: black;}ul{list-style: none;margin-top: 10px;}li{color: white;float: left;padding-left: 38px;padding-top: 25px;}#a{width: 750px;height: 500px;border: 3px solid white;margin: 0 auto;margin-top: 100px;}ul li img{width: 200px;height: 200px;opacity: 0.4;}.wrapper{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 999;background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-size: 25%;}</style><script src="../练习3：京东常见问题分类页面/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="a"><ul><li><img src="data:image/11.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/22.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/33.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/44.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/55.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/66.jpg" alt="" class="enlargeImg"/></li></ul>
</div>
<script>$(function (){$("ul li").hover(function (){$(this).siblings().stop().fadeTo(300,0.4)},function (){$(this).siblings().stop().fadeTo(300,1)})})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;z-index: 0;}body{background-color: black;}ul{list-style: none;margin-top: 10px;}li{color: white;float: left;padding-left: 38px;padding-top: 25px;}#a{width: 750px;height: 500px;border: 3px solid white;margin: 0 auto;margin-top: 100px;}ul li img{width: 200px;height: 200px;opacity: 0.4;}.wrapper{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 999;background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-size: 25%;}</style><script src="../练习3：京东常见问题分类页面/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="a"><ul><li><img src="data:image/11.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/22.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/33.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/44.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/55.jpg" alt="" class="enlargeImg"/></li><li><img src="data:image/66.jpg" alt="" class="enlargeImg"/></li></ul>
</div>
<script>$(function (){$("ul li").hover(function (){$(this).siblings().stop().fadeTo(300,0.4)},function (){$(this).siblings().stop().fadeTo(300,1)})})
</script>
</body>
</html>

这个就比较完美了那么一丢丢。

jQuery京剧人物动画相关推荐

一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览源码下载实现的代码. html代码: & ...
8款效果精美的 jQuery 加载动画和进度条插件
加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...
html用jq设置动态效果,jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画语法: $(selector).animate({params},spee ...
unity人物旋转移动代码_游戏诞生之日02 - 美术篇快速制作人物动画
在上一篇<游戏诞生之日01 - 美术篇快速搭建和渲染游戏的第一个场景>里,我们得到了一个静态渲染的游戏场景. 接下来我们需要加入人物动画,为游戏注入活力. 第五块拼图 - 动画素材从哪里 ...
玩转Jquery中的动画效果(animate方法)
jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法: $(selector).animate({params},speed,callba ...
jquery工具箱旋转动画效果
jquery工具箱旋转动画效果今天给大家分享一个工具箱的旋转动画效果,因为做GIS项目的时候所需要到,这是我在懒人之家看到的一个jquery鼠标点击按钮图标旋转弹出图标菜单旋转动画. 首先,可以引用 ...
html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
原标题:9款用HTML5/CSS3制作的动物.人物动画今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. ...
jQuery中的动画理论干货
[jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法] 1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于 ...
html 动物特效,分享9款用HTML5/CSS3制作的动物人物动画，
分享9款用HTML5/CSS3制作的动物人物动画, 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示源码下载 2.HTML5 Canv ...
国潮国粹剪纸风京剧人物PSD素材，让东方韵味更浓
"脸谱"是指中国传统戏剧里男演员脸部的彩色化妆.这种脸部化妆主要用于净(花脸)和丑(小丑).它在形式.色彩和类型上有一定的格式.内行的观众从脸谱上就可以分辨出这个角色是英雄还是坏人 ...

jQuery京剧人物动画

首先我们这会用到的知识点和需求：

我么可以看到鼠标移到上面时改变透明度，并且只改变鼠标指针指到的那一个，

我们先用第一种普通的做法，

用透明度：opacity来做这道题，但是也有一定的缺点，等下就会发现。

这个就比较完美了那么一丢丢。

jQuery京剧人物动画相关推荐

最新文章

热门文章