Copyright © 2002-2027 web-phoenix.net 【凤凰网络】 版权所有 All Rights Reserved.
【凤凰网络】提供优质的云南网站建设一条龙全包服务,从网站制作到云南百度竞价推广,以及昆明百度竞价托管代运营全套服务,看得见的效果!
【凤凰网络】提供优质的云南网站建设一条龙全包服务,从网站制作到云南百度竞价推广,以及昆明百度竞价托管代运营全套服务,看得见的效果!
当前位置: 网站首页 > 网站建设教程 >
十五天快速学会JQuery 切换效果（第十一天）
点击切换
点击切换是最常见的动态效果，我们用 JQuery 来实现它。
<!DOCTYPE html>
<html>
<head>
<title>切换效果</title>
</head>
<script type="text/javascript" src="https://lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('span').eq(0).click(function() {
$('ul').show()
})
$('span').eq(1).click(function() {
$('ul').hide()
})
})
</script>
<body>
<p><span>点击打开</span> / <span>点击关闭</span></p>
<ul style="display: none;">
<li>首页</li>
<li>分类</li>
<li>...</li>
</ul>
</body>
</html>
切换效果
如果你希望在打开和关闭的过程，能有点不一样的动画功能，例如 慢慢的伸长、若隐若现 可以尝试下面两个方法。
// 无效果
show() // 显示
hide(3000) // 3秒消失 | 所有方法都可以加入时间
// 伸缩
slideDown()
slideUp()
// 淡入淡出
fadeIn()
fadeOut()
toggle
toggle 是 show 和 hide 合二为一的方法，它会判断目标元素是显示状态还是隐藏状态，然后对它 智能切换。
toggle() // 无效果切换
slideToggle() // 伸缩切换
fadeToggle() // 淡入淡出切换
【十五天快速学会JQuery 切换效果（第十一天）热度：93】 【更多网站建设教程】
下一篇：移动手机网站建设的要点