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>