无论css还是js，都有好多种方法能实现，写个简单的例子给你
jquery写法（需要加载jquery文件），如下：
<h1 class="demo">测试文字，测试文字，测试文字</h1> $(".demo").hover(function(){$(this).fadeOut(1000)
})
css写法，如下：
<h1 class="demo">测试文字，测试文字，测试文字</h1> .demo{transition: 1s
-moz-transition: 1s
-webkit-transition: 1s
-o-transition: 1s
}
.demo:hover{
opacity: 0
}
@keyframes fade-in {0% {opacity: 0}/*初始状态 透明度为0*/
40% {opacity: 0}/*过渡状态 透明度为0*/
100% {opacity: 1}/*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {/*针对webkit内核*/
0% {opacity: 0}
40% {opacity: 0}
100% {opacity: 1}
}
@keyframes fade-out {
0% {opacity: 1}/*初始状态 透明度为1*/
40% {opacity: 1}/*过渡状态 透明度为1*/
100% {opacity: 0}/*结束状态 透明度为0*/
}
@-webkit-keyframes fade-out {/*针对webkit内核*/
0% {opacity: 1}
40% {opacity: 1}
100% {opacity: 0}
}
.wrapper {
animation: fade-in/*动画名称*/
animation-duration: 1.5s/*动画持续时间*/
-webkit-animation:fade-in 1.5s/*针对webkit内核*/
}
.wrapper1 {
animation: fade-out/*动画名称*/
animation-duration: 1.5s/*动画持续时间*/
-webkit-animation:fade-in 1.5s/*针对webkit内核*/
}
$(.wrapper).click(function(){
removeClass(wrapper)
addClass(wrapper1)
})
使用 return false，将会禁止向上冒泡和禁止默认行为。也就是禁止了元素的默认响应和上层元素的继续响应。建议先检查上层元素是否有click响应，再尝试先remove后addclass试试。
