집 > 기사 > 웹 프론트엔드 > jquery는 먼저 페이드 아웃한 다음 접는 애니메이션 효과를 구현합니다._jquery

jquery는 먼저 페이드 아웃한 다음 접는 애니메이션 효과를 구현합니다._jquery

WBOY원래의: 2016-05-16 15:46:391155검색

이 기사의 예에서는 먼저 페이드 아웃된 다음 축소되는 jquery의 애니메이션 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기에서는 Jquery를 사용하여 먼저 페이드 아웃한 다음 접고 변형하는 애니메이션 효과를 구현하고, 먼저 페이드 아웃한 다음 Div의 모양을 변경합니다.

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

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

<!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: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; }
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $("#panel h5.head").toggle(function(){
  $(this).next("div.content").fadeOut();
 },function(){
  $(this).next("div.content").fadeIn();
 })
})
</script>
</head>
<body>
<div id="panel">
 <h5 class="head">jQuery动画制作实例</h5>
 <div class="content">
  展示使用jQuery生成动画效果的一个小例子，让一个Div层先淡出然后再发生形变，最后折叠消失的特效代码。。</div>
</div>
</body>
</html>

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

성명：

이전 기사：자바스크립트는 마우스 위치 후 아래 해당 내용이 변경되는 효과를 구현합니다_javascript 기술다음 기사：자바스크립트는 마우스 위치 후 아래 해당 내용이 변경되는 효과를 구현합니다_javascript 기술

jquery는 먼저 페이드 아웃한 다음 접는 애니메이션 효과를 구현합니다._jquery

관련 기사