<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery的显示和隐藏</title> <style type="text/css"> div{ width:150px; height:100px; border:1px red solid; display:none; } </style> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ /* $("input[type=‘button‘]").click(function(){ //让div显示 $("#divId").show(3000,function(){ //显示完毕后执行函数 alert("aaa"); }); }); */ /* $("input[type=‘button‘]").click(function(){ //让div隐藏 $("#divId").hide(3000,function(){ alert("隐藏"); }); }); */ /* $("input[type=‘button‘]").click(function(){ //让div从上到下显示 $("#divId").slideDown(3000,function(){ alert("从上到下显示。。。") }); }); */ /* $("input[type=‘button‘]").click(function(){ //让div从下到上隐藏 $("#divId").slideUp(3000,function(){ alert("从下到上隐藏。。。") }); }); */ $("input[type=‘button‘]").click(function(){ //让div淡入显示 $("#divId").fadeIn(3000,function(){ alert("让div淡入显示") }); }); }); </script> </head> <body> <div id="divId"> 我是DIV </div> <input type="button" value="点击"/> </body> </html>