文章主题
jquery 动画效果
文章正文
加点动画效果,上档次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js""></script>
<script src="js/index9.js"></script>
</head>
<body>
<div id="d1" style="width: 200px;height: 200px;">
<img src="img/1.jpg" style="width: 100%;height: 100%;"/>
</div>
</body>
</html>
$(function(){
$("#d1").mouseover(function(){
//$("#d1").hide(3000);//花3秒隐藏
//$(this).slideUp(3000);//向上收起
//$(this).fadeOut(3000);//淡出
//$(this).fadeTo(3000,"0.5");//淡出到指定透明度
$(this).animate({"width":"400px"},3000).delay(2000).animate({"height":"400px"},3000);
}).mouseout(function(){
//$("#d1").show(3000);//花3秒显示
//$(this).slideDown(3000);//向下展开
//$(this).fadeIn(3000);//淡入
$(this).animate({"width":"200px"},3000).delay(2000).animate({"height":"200px"},3000);
})
})
运行效果