淡入淡出效果 || 高亮显示案例
生活随笔
收集整理的這篇文章主要介紹了
淡入淡出效果 || 高亮显示案例
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
淡入淡出效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 150px;height: 300px;background-color: pink;display: none;}</style><script src="jquery.min.js"></script> </head><body><button>淡入效果</button><button>淡出效果</button><button>淡入淡出切換</button><button>修改透明度</button><div></div><script>$(function() {$("button").eq(0).click(function() {// 淡入 fadeIn()$("div").fadeIn(1000);})$("button").eq(1).click(function() {// 淡出 fadeOut()$("div").fadeOut(1000);})$("button").eq(2).click(function() {// 淡入淡出切換 fadeToggle()$("div").fadeToggle(1000);});$("button").eq(3).click(function() {// 修改透明度 fadeTo() 這個(gè)速度和透明度要必須寫$("div").fadeTo(1000, 0.5);});});</script> </body></html>高亮顯示案例
<!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;}</style><script src="jquery.min.js"></script><script>$(function() {//鼠標(biāo)進(jìn)入的時(shí)候,其他的li標(biāo)簽透明度：0.5$(".wrap li").hover(function() {$(this).siblings().stop().fadeTo(400, 0.5);}, function() {// 鼠標(biāo)離開，其他li 透明度改為 1$(this).siblings().stop().fadeTo(400, 1);})});</script> </head><body><div class="wrap"><ul><li><a href="#"><img src="images/01.jpg" alt="" /></a></li><li><a href="#"><img src="images/02.jpg" alt="" /></a></li><li><a href="#"><img src="images/03.jpg" alt="" /></a></li><li><a href="#"><img src="images/04.jpg" alt="" /></a></li><li><a href="#"><img src="images/05.jpg" alt="" /></a></li><li><a href="#"><img src="images/06.jpg" alt="" /></a></li></ul></div> </body></html> 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的淡入淡出效果 || 高亮显示案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery 效果——显示隐藏/滑动/淡
- 下一篇： 自定义动画 animate || 案例：