jQuery-淡入淡出

淡入淡出，改变透明度

fadeIn()- - -淡入（显示）
fadeOut()- - -淡出（消失）
fadeToggle()- - -（显示消失切换）
fadeTo()- - -改变透明度; fadeTo(动画时间，要变成的透明度)，透明度0~1

fadeTo使用示例

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jquery淡入淡出</title><style>body {background-color: #333;}ul {margin: 100px auto;width: 450px;}li {float: left;width: 150px;height: 150px;padding: 10px;list-style: none;border: 1px solid #ccc;box-sizing: border-box;background-color: #eee;}img {width: 100%;height: 100%;}</style><script src="js/jQuery.min.js"></script>
</head>
<body><ul><li><img src="data:images/头像1.jpg" alt=""></li><li><img src="data:images/头像2.jpg" alt=""></li><li><img src="data:images/头像3.jpg" alt=""></li><li><img src="data:images/头像4.jpg" alt=""></li><li><img src="data:images/小狐狸3.jpg" alt=""></li><li><img src="data:images/头像5.jpg" alt=""></li></ul><script>$(function() {$("li").hover(function() {$(this).siblings().stop().fadeTo(400, 0.5);},function() {$(this).siblings().stop().fadeTo(400, 1);});})</script>
</body>
</html>

页面效果

注意：清除动画影响用stop()，且要放在动画之前

jQuery-淡入淡出相关推荐

jQuery 淡入淡出
jQuery Fading 方法通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
jQuery |淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo() 下面一一介绍 jQu ...
Web入门：JQuery淡入淡出面板
欢迎来的我的小院,恭喜你今天又要涨知识了! 案例内容利用JQuery的fadeToggle() 方法,完成面板淡入淡出. 演示学习 <!DOCTYPE html> <html l ...
jQuery 淡入淡出、滑动和动画
一.淡入淡出 1.jQuery fadeIn() 方法 jQuery fadeIn() 用于淡入已隐藏的元素. 语法:$(selector).fadeIn(speed,callback); 可选的 s ...
jQuery淡入淡出fadeIn() fadeOut() fadeToggle() fadeTo()
通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo() 1,jQuery f ...
jquery淡入淡出效果及突出显示案例
fadeToggle方法可以动态地让淡入淡出相互切换 fadeTO方法淡入淡出到指定透明度使用fadeTo方法让元素透明度淡入到0时,这个元素还是会保留原有位置的宽和高,只不过是透明度透明了而已从 ...
jQuery：jQuery淡入淡出效果语法及修改透明度fadeTo()
1.淡入效果: fadeIn([speed],[easing]),[fn]; 淡入效果参数: 参数是可以都省略的,和之前show().hide()参数一样: speed:有slow.normal.fa ...
【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例
jQuery淡入淡出动画-右下角广告 CSS display 属性淡入淡出动画案例 jQuery笔记目录 CSS display 属性 display 属性规定元素应该生成的框的类型. 值描述 n ...
html5页面滑入滑出效果,jQuery实现的淡入淡出与滑入滑出效果示例
本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: ...
004_淡入淡出效果
1. jQuery淡入淡出方法 1.1. 通过jQuery, 您可以实现元素的淡入淡出效果. 1.2. jQuery拥有下面四种fade方法: fadeIn().fadeOut().fadeToggl ...

jQuery-淡入淡出

淡入淡出，改变透明度

fadeTo使用示例

代码：

页面效果

注意：清除动画影响用stop()，且要放在动画之前

jQuery-淡入淡出相关推荐

最新文章

热门文章