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

toggleshowhide 合二为一的方法,它会判断目标元素是显示状态还是隐藏状态,然后对它 智能切换

toggle() // 无效果切换
slideToggle() // 伸缩切换
fadeToggle() // 淡入淡出切换
JQuery 教程 JQuery 入门 JQuery DOM JQuery 表单 JQuery Ajax JQuery 事件 JQuery 切换效果