jQuery Animation SlideUp/Down
jQuery SlideUp/Down 애니메이션 예
처음에는 글 제목만 보여주고 아이콘을 클릭하면 내용을 보여주는 내용
사용된 이미지
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jQuery Test</title>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#arrowImg').mouseover(function(){
$(this).css('cursor','pointer');
});
$('#arrowImg').click(function(){
$('#div3').slideToggle(1000, function(){
var img = $('#arrowImg');
if(img.attr('src')=='up.jpg') {
img.attr('src','down.jpg');
img.attr('title','클릭하면 내용을 볼 수 있습니다');
}else {
img.attr('src','up.jpg');
img.attr('title','클릭하면 접을 수 있습니다');
}
});
});
$('#div3').slideUp(1);
});
</script>
</head>
<body>
<b>긍정심리학(肯定心理學, 영어: positive psychology)</b><br>
<img id="arrowImg" src="down.jpg" title='클릭하면 내용을 볼 수 있습니다'><br>
<div id="div3" style="width:400px; background-color: lightblue;">
긍정심리학(肯定心理學, 영어: positive psychology)은
개인과 사회를 번영시키는 강점과 장점을 연구하는 최근 주목받고있는 심리학의 한 분야이다.
단지 정신질환을 치료하는 것보다 일반적인 인생을 보다 충실히 하기 위한 연구가 이루어지고 있다.
즉, 긍정심리학은 능력 개발 상담의 한 분야이다.
</div>
</body>
</html>