<script src="../JS/jquery.min.js"></script>
<script>
/*
- animate괄호안에 변수가 들어갈 수 있다는 것을 보여주는 예제
*/
var ml=100;
$(function(){
$('.box').animate({'margin-left':ml+'1px'}, );
})
</script>
</head>
<body>
<div class="box" style="height: 100px; width: 100px; background:thistle;" ></div>
</body>더보기
/*
- $(selector).animate({params},speed,callback);
- params : css속성과 값
- speed : 애니메이션 속도
- callback : 애니메이션 끝난 후 해야할 작업을 호출하는 함수
*/
<script src="/../JS/jquery.min.js"></script>
<script>
$(function(){
$('#right').click(function(){
$('.box').stop().animate({left:'200px'}, 1000,function(){
console.log('오른쪽으로 이동 완료');
});
});
/* 왼쪽 버튼을 클릭하면 왼쪽으로 이동하는 코드를 작성하세요.*/
$('#left').click(function(){
$('.box').stop().animate({left:'0px'}, 1000, function(){
console.log('왼쪽으로 이동 완료');
});
});
});
</script>
<style> /*script랑 style이랑 누가 먼저오는 순서는 상관없음*/
.box{
width: 100px; height: 100px; background: yellow; position: relative; margin-top: 20px;}
</style>
</head>
<body>
<button id="right">오른쪽</button>
<button id="left">왼쪽</button>
<div class="box"></div>
</body>
/* => slide도 animate로 구현할 수 있음을 확인하는 예제
- up버튼을 클릭하면 박스가 슬라이드 up이되고,
down버튼을 클릭하면 박스가 슬라이드 down이 되도록 코드를 작성하세요.
단, slideUp, slideDown이 아닌 animate를 이용할 것
*/
<title>슬라이드 예제</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('#up').click(function(){
$('.box').stop().animate({height:'0'},1000,function(){ //추가 function안하고싶으면 바로괄호닫고 );
console.log('위로 슬라이드(접기)')
})
})
$('#down').click(function(){
$('.box').stop().animate({height:'100px'},1000,function(){
console.log('아래로 슬라이드(펴기)')
})
})
$('#right').click(function(){
$('.box').stop().animate({width:'0px'},1000,function(){
console.log('왼쪽으로 슬라이드(접기)')
})
})
$('#left').click(function(){
$('.box').stop().animate({width:'100px'},1000,function(){
console.log('오른쪽으로 슬라이드(펴기)')
})
})
})
</script>
<style>
.box{
width: 100px; height: 100px; background: tomato;
position:absolute; top: 100px; right: calc(100vw - 100px);} /*오른쪽기준이고싶엉*/
</style>
</head>
<body>
<button id="up">up</button>
<button id="down">down</button>
<button id='left'>가로펴기</button>
<button id="right">가로접기</button>
<div class="box"></div>
</body>
/*
- show버튼을 클릭하면 요소가 보여지고, hide버튼을 클릭하면 요소가 안보이도록 코드를 작성하세요.
단, animate를 이용하세요. (show와 hide를 animate로 구현하기)
*/
//animate에서 display:block?을 지원하지 않기때문에 아래와 같이 작업을 해줌????????
//animate{}의 괄호안에 올 수 있는 건, 값이 숫자로 설정될 수 있는 속성들이 올 수 있음
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('#show').click(function(){
$('.box').stop().animate({height:'100px'},100,function(){
$(this).animate({opacity:1},100)
});
});
$('#hide').click(function(){
$('.box').stop().animate({opacity:0},100,function(){
$(this).animate({height:'0px'})
});
});
});
</script>
</head>
<body>
<button id="show">show</button>
<button id="hide">hide</button>
<div class="box" style="height: 100px; background:wheat;"></div>
<div class="box2" style="height: 100px; background:black;"></div>
</body>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_더보기기능 (0) | 2021.06.22 |
|---|---|
| JQ_rolling예제 (0) | 2021.06.22 |
| JQ_fade(fadeIn, fadeOut, fadeToggle, fadeTo) (0) | 2021.06.22 |
| JQ_효과(hide, show, toggle) (1) | 2021.06.22 |
| JQ_Form event(폼 이벤트) (1) | 2021.06.22 |