Home>

Here is introduced jquery to achieve a series of continuous animation effects,Set up these animation applications first,Then complete the animation one by one under the action of jquery,This is a basic but important animation generation skill in web game writing.It is also necessary to master the front desk design.

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>jquery to achieve continuous animation effects</title>
<style type="text/css">
* {margin:0;padding:0;}
body {font-size:13px;line-height:130%;padding:60px}
#panel {width:60px;border:1px solid #0050d0;height:22px;overflow:hidden;}
.head {padding:5px;background:#96e555;cursor:pointer;width:300px;}
.content {padding:10px;text-indent:2em;border-top:1px solid #0050d0;display:block;width:280px;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function () {
  $("button:eq (0)"). click (function () {
   $("#panel")
   .animate ({height:"150"}, 1000)
   .animate ({width:"300"}, 1000)
   .hide (2000)
   .animate ({height:"show", width:"show", opacity:"show"}, 1000)
   .animate ({height:"500"}, 1000);
  });
  $("button:eq (1)"). click (function () {
   $("#panel"). stop ();//Stop the current animation,Continue to the next animation
  });
  $("button:eq (2)"). click (function () {
   $("#panel"). stop (true);//Clear all animations of the element
  });
  $("button:eq (3)"). click (function () {
   $("#panel"). stop (false, true);//Let the current animation directly reach the end state and continue to the next animation
  });
  $("button:eq (4)"). click (function () {
   $("#panel"). stop (true, true);//Clear all animations of the element,Let the current animation directly reach the end state
  });
})
</script>
</head>
<body>
 <button>Start a series of animations</button>
 <button>stop ()</button>
 <button>stop (true)</button>
 <button>stop (false, true)</button>
 <button>stop (true, true)</button>
<div>
 <h5>What is jquery?</h5>
 <div>
  jquery is another excellent javascript library after prototype. It is an open source project created by john resig in January 2006.
jquery with concise syntax and cross-platform compatibility,Greatly simplifies JavaScript developers to traverse html documents, manipulate dom, handle events, perform animations, and develop Ajax. Its unique and elegant code style has changed the design thinking and the way of writing programs for javascript programmers.
 </div>
</div>
</body>
</html>
  • Previous Examples of XML generation methods commonly used in Android
  • Next What-if for Powershell error handling