jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery 效果
?
顯示隱藏效果
<!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;}</style><script src="jquery.min.js"></script> </head><body><button>顯示</button><button>隱藏</button><button>切換</button><div></div><script>$(function() {$("button").eq(0).click(function() {$("div").show(1000, function() {alert(1);});})$("button").eq(1).click(function() {$("div").hide(1000, function() {alert(1);});})$("button").eq(2).click(function() {$("div").toggle(1000);})// 一般情況下，我們都不加參數直接顯示隱藏就可以了});</script> </body></html>滑動效果
<!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><div></div><script>$(function() {$("button").eq(0).click(function() {// 下滑動 slideDown()$("div").slideDown();})$("button").eq(1).click(function() {// 上滑動 slideUp()$("div").slideUp(500);})$("button").eq(2).click(function() {// 滑動切換 slideToggle()$("div").slideToggle(500);});});</script> </body></html>事件切換
簡潔版滑動下拉菜單
<!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>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}</style><script src="jquery.min.js"></script> </head><body><ul class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li></ul><script>$(function() {// 鼠標經過// $(".nav>li").mouseover(function() {// // $(this) jQuery 當前元素 this不要加引號// // show() 顯示元素 hide() 隱藏元素// $(this).children("ul").slideDown(200);// });// // 鼠標離開// $(".nav>li").mouseout(function() {// $(this).children("ul").slideUp(200);// });// 1. 事件切換 hover 就是鼠標經過和離開的復合寫法// $(".nav>li").hover(function() {// $(this).children("ul").slideDown(200);// }, function() {// $(this).children("ul").slideUp(200);// });// 2. 事件切換 hover 如果只寫一個函數，那么鼠標經過和鼠標離開都會觸發這個函數$(".nav>li").hover(function() {$(this).children("ul").slideToggle();});})</script> </body></html>總結
以上是生活随笔為你收集整理的jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery 样式操作||操作 css
- 下一篇： 淡入淡出效果 || 高亮显示案例