집 >웹 프론트엔드 >JS 튜토리얼 >jQuery_jquery를 활용한 연속 애니메이션 효과 사례 분석

jQuery_jquery를 활용한 연속 애니메이션 효과 사례 분석

WBOY원래의: 2016-05-16 15:37:071172검색

이 기사의 예에서는 jQuery가 어떻게 지속적인 애니메이션 효과를 얻을 수 있는지 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

연속적인 애니메이션 효과를 실현하기 위해 jQuery를 소개합니다. 이러한 애니메이션 애플리케이션을 먼저 설정한 다음 jQuery의 영향을 받아 애니메이션이 차례로 완성됩니다. 이는 웹에서 기본이지만 중요한 애니메이션 생성 기술입니다. 게임 라이팅을 위해서는 프론트 디자인도 마스터해야 합니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/jquery-lx-animate-style-demo/

구체적인 코드는 다음과 같습니다.

<!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实现连续的动画效果</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();//停止当前动画，继续下一个动画
  });
  $("button:eq(2)").click(function () {
   $("#panel").stop(true);//清除元素的所有动画
  });
  $("button:eq(3)").click(function () {
   $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画
  });
  $("button:eq(4)").click(function () {
   $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态 
  });
})
</script>
</head>
<body>
 <button>开始一连串动画</button>
 <button>stop()</button>
 <button>stop(true)</button>
 <button>stop(false,true)</button>
 <button>stop(true,true)</button>
<div id="panel">
 <h5 class="head">什么是jQuery&#63;</h5>
 <div class="content">
  jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
 </div>
</div>
</body>
</html>

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

성명：

이전 기사：Clipboard.js는 Flash가 필요하지 않으며 텍스트 복사 및 Cutting_javascript 기술을 실현하기 위해 JS 라이브러리에 의존하지 않습니다.다음 기사：Clipboard.js는 Flash가 필요하지 않으며 텍스트 복사 및 Cutting_javascript 기술을 실현하기 위해 JS 라이브러리에 의존하지 않습니다.

jQuery_jquery를 활용한 연속 애니메이션 효과 사례 분석

관련 기사