사용자 지정 효과 animate
오라클자바커뮤니티에서 설립한 오엔제이프로그래밍
실무교육센터
(오라클SQL, 튜닝, 힌트,자바프레임워크, 안드로이드, 아이폰, 닷넷 실무전문 강의)
animate() : 사용자 지정 효과 생성, 스타일 속성을 동적으로 변경해 애니메이션 효과
냄
$(selector).animate(object);
$(selector).animate(object, speed);
$(selector).animate(object, speed, easing);
$(selector).animate(object, speed, easing, callback)
$(selector).animate(object);
$(selector).animate(object, speed);
$(selector).animate(object, speed, easing);
$(selector).animate(object, speed, easing, callback)
<html><head><style>
div { width:50px; height:50px;
background-color:yellow; }
</style>
<script src="/ajaxjquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//클릭하면 50px씩 커짐
$("div").click(function () {
var width = $(this).css('width');
var height = $(this).css('height');
div { width:50px; height:50px;
background-color:yellow; }
</style>
<script src="/ajaxjquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//클릭하면 50px씩 커짐
$("div").click(function () {
var width = $(this).css('width');
var height = $(this).css('height');
$(this).animate( {
//width: parseInt(width) + 50,
//height: parseInt(height) + 50
width: '+=50',
height: '+=50'
}, 'slow');
});
//더블클릭하면 50px 작아짐(클릭이벤트도 반응해서 커진 후 작아짐)
$("div").dblclick(function () {
var width = $(this).css('width');
var height = $(this).css('height');
//width: parseInt(width) + 50,
//height: parseInt(height) + 50
width: '+=50',
height: '+=50'
}, 'slow');
});
//더블클릭하면 50px 작아짐(클릭이벤트도 반응해서 커진 후 작아짐)
$("div").dblclick(function () {
var width = $(this).css('width');
var height = $(this).css('height');
$(this).animate( {
//width: parseInt(width) - 50,
//height: parseInt(height) - 50
width: '-=50',
height: '-=50'
}, 'slow');
});
});
</script>
<body>
<div></div>
</body>
</html>
//width: parseInt(width) - 50,
//height: parseInt(height) - 50
width: '-=50',
height: '-=50'
}, 'slow');
});
});
</script>
<body>
<div></div>
</body>
</html>
댓글 없음:
댓글 쓰기