qq的推拉效果（包括单击，鼠标移动上去离开）

<style type="text/css"> .display{ display:none;} .highclass{ background:#ff0;} </style>

鼠标移上去和离开时

$(function () { /*$("#div1").bind("mouseover", function () { $("#div2").show(); }).bind("mouseout", function () { $("#div2").hide(); }); $("#div1").mouseover(function () {//show()比css更好用,hide()有记忆show时显示为block或其它值的功能，然后再对其隐藏 $(this).next().show(); }).mouseout(function () { $("#div2").hide(); });*/ $("#div1").bind("mouseover mouseout", function () { $("#div2").toggleClass("display"); }); /* $("#div1").hover(function () { //相当于mouseenter $(this).next().show(); }, function () {//相当于mouseleave $(this).next().hide(); }); */ });

鼠标单击时：

/* $("#div1").click(function () {//单击仅显示内容有以下几种方法 //$(this).next().css("display", ""); $(this).next().show(); }); $("#div1").bind("click", function () { $(this).next().show(); }); $("#div1").bind("click", function () { //单击显示和隐藏效果 var content=$(this).next(); if (content.is(":visible")) { content.hide(); } else { content.show(); } }); $("#div1").toggle(function () { $(this).addClass("highclass").next().show(); }, function () { $(this).removeClass("highclass").next().hide(); });*/ $("#div1").click(function () { //$("#div2").toggle(); //$("#div2").slideToggle(); //$("#div2").fadeToggle(); $("#div2").fadeTo(1000, 0.2);//1000是时间，0.2是opacity }); });

网页：

<div id="div1">中国质量网</div> <div id="div2" style="display:none;">中国质量网是一个质量专业的网站！！！！！！！！！！</div>