Home>

Here is the jquery control div from large to small,The effect changes from far and near animation,A small example of using jquery to generate animation effects,Hope you like it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>The panel controls the movement of the div, from large to small.
</title>
<style type="text/css">
* {margin:0;padding:0;}
body {padding:60px}
#panel {position:relative;width:100px;height:100px;border:1px solid #0050d0;background:#96e555;cursor:pointer}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(function () {
 $("#panel"). css ("opacity", "0.5");//Set the opacity
 $("#panel"). click (function () {
  $(this) .animate ({left:"400px", height:"200px", opacity:"1"}, 3000)
   .animate ({top:"200px", width:"200px"}, 3000, function () {
    $(this) .css ("border", "5px solid blue");
  })
 });
 });
</script>
</head>
<body>
<div></div>
</body>
</html>
  • Previous Four common POST data submission methods (small summary)
  • Next How to solve the problem when using WordPress's $wpdb class to read the mysql database and do ajax