| 05.Animate.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>여러가지 효과 동시 처리</title>
<style type="text/css">
#my .hover
{
cursor:pointer;
background-color:Yellow;
}
</style>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ $("#moreRegion").hide();
//기본값으로 숨기기 $("span.more").click(function() { $("#moreRegion").animate({ height: '200px', width: 'show',
opacity: 'show' }, 'slow'); $(this).hide('fast'); });
});
</script> </head> <body>
<div class="region"> 안녕하세요. 여기는 본문입니다.
<span class="more">more...</span></div>
<div id="moreRegion" style="height:100px;
background-color:Yellow;"> 또 만나요
</div> </body> </html> |
| 결과화면 |
[그림52-1]
more 클릭시 대각선으로 영역이 나타납니다. |
05.Animate.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| -- 현재 까지의 jQuery 소스6 -- (0) | 2009.11.12 |
|---|---|
| 53.jQuery - stop 메서드로 다중 효과 구현 ( 08.Effects ) (0) | 2009.11.12 |
| 51.jQuery - slideToggle()로 지정된 영역 보이고 안보이게 하기 ( 08.Effects ) (0) | 2009.11.12 |
| 50.jQuery - slideUp()으로 위로 올려서 숨기기 ( 08.Effects ) (0) | 2009.11.12 |
| 49.jQuery - fadeIn()과 fadeOut()으로 불투명도 표시 ( 08.Effects ) (0) | 2009.11.12 |
Comments