$(document).ready(function() {
$("input").click(function() {
$(this).hide().fadeIn(700).addClass('b')//当前这个input先隐藏再渐显，你可以测试一下，如果不是你想要的效果，你可以查一下jq的渐隐效果函数或者animate（）函数，控制这个input的透明度就好了，例如 $(this).animate（‘opacity’，‘0’）；
//点击text增加b效果
$("body").one("click", function() {
$("input").removeClass("b")
//点击其他地方消除b效果
})
return false
})
})
transform呈现的是一种变形结果，而transition呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。
transition属性是一个简写属性，用于设置四个过渡属性
transition-property ：指定要过渡的css属性
transition-duration： 指定完成过渡花费的时间
transition-timing-function： 指定速度效果的速度曲线
transition-delay：指定过渡效果何时开始
<html><head>
<title>网页特效-文本特效-渐显的文字提示效果</title>
<FCK:meta http-equiv="content-Type" content="text/htmlcharset=gb2312" />
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.lookMe{
float:left
margin-right:10px
padding:5px
width:90px
color:#0099FF
cursor:pointer
background:#FFFADC
border:1px solid #CC6600
}
.lookMe span{
display:none
position:absolute
padding:5px
width:200px
color:#CC3300
background:#FFFADC
border:1px solid #CC6600
filter:alpha(opacity=0)
}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
<span>1、雅虎体育讯 北京时间6月23日，欧洲足球锦标赛在瑞士奥地利继续进行，在一场四分之一决赛中，西班牙队迎来了上届世界杯冠军意大利队，90分钟与加时赛双方均一球未进，在最终的点球大战中，西班牙4:2击败了对手，昂首挺进四强。</span>
</div>
<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
<span>2、在一场四分之一决赛中……</span>
</div>
<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
<span>3、欧洲足球锦标赛在瑞士奥地利继续进行，在一场四分之一决赛中，西班牙队迎来了上届世界杯冠军意大利队，90分钟与加时赛双方均一球未进，在最终的点球大战中，西班牙4:2击败了对手，昂首挺进四强。</span>
</div>
<script>
var span,timer1
function lookMe(thisTag){
span = thisTag.getElementsByTagName('span')[0]
span.style.display = 'block'
span.filters[0].opacity=0
timer1=setInterval("showme()",10)
thisTag.onmouseout = function(){
span.style.display = 'none'
}
}
function showme()
{
if(span.filters[0].opacity==80){clearInterval(timer1)}
span.filters[0].opacity++
}
function mouseMove(event){
var xx=event.clientX + 5
var yy=event.clientY + 10
var obj = event.srcElement ? event.srcElement : event.target
var span=obj.getElementsByTagName("span")[0]
span.style.left = xx + 'px'
span.style.top = yy + 'px'
}
</script>
</body>
</html>
