search

Home >Web Front-end >JS Tutorial >jQuery controls the DIV layer to achieve animation changes from large to small, from far to near

jQuery controls the DIV layer to achieve animation changes from large to small, from far to near

PHP中文网
PHP中文网Original
2016-05-16 15:37:091544browse

The example in this article describes how jQuery controls the DIV layer to achieve animation changes from large to small, from far to near. Share it with everyone for your reference. The details are as follows:

Here is a small example of jQuery controlling the animation effect of DIV from large to small, from far to near, and using jquery to generate animation effects. I hope you like it.

The screenshot of the running effect 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>Panel控制Div运动，由大到小变化。</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");//设置不透明度
 $("#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 id="panel"></div>
</body>
</html>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：An in-depth discussion of javascript functional programming_javascript skillsNext article：An in-depth discussion of javascript functional programming_javascript skills

Related articles

See more