前端之jquery动画应用

来源：互联网发布：淘宝可以参加聚划算吗编辑：程序博客网时间：2024/06/05 08:16

前端之jquery动画应用

jquery的用意为写得更少做得更多。下面的js代码是十分稀少的，当前这个代码还能变得更少，因为其mouseover和mouseout两个有绝大部分的参数都是相同的，可以归为一个方法，这里我就不详细说如何归成一个方法。
我虽然只动了一小部分代码却实现了非常良好的动画效果，这个原声的js万万做不到的。在实现对应的animate方法之前，需要将其原先的方法关闭，反之两个动画效果产生冲突。animate方法实现在一定时间内完成对应的css效果，所以下面这个小demo可以实现很多有趣的效果，各位小伙伴好好加油哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){    $("#div1").mouseover(function(){        $("#div1").stop();        $("#div1").animate({            opacity: 0.25,            width: '256px',            height: '256px'        }, 1000);    });    $("#div1").mouseout(function(){        $("#div1").stop();        $("#div1").animate({            opacity: 0.5,            width: '300px',            height: '300px'        }, 1000);    });});</script><style type="text/css">#div1{    width: 300px;    height: 300px;    position: absolute;    left: 10px;    opacity: 0.5;    background: red;}</style></head><body><div id="div1"></div></body></html>

阅读全文

2 0