jQuery2
jQuery
개발시에는 html에 css, script 테스트후
정상작동 확인하면 각각 파일로 분리하기.
<body>
<button id = "Animate-button">Animate button</button>
<button id ="Animate-button2">Animate button2</button>
<div id = "Animate-div" style = "width : 100px; height : 100px; background: #bf2121; position: relative;">BOX</div>
<script>
//애니매이션 주기
//$(선택자).animate({스타일} ,지속시간 ,콜백 함수);
//opacity : 투명도
$(document).ready(function(){
$("#Animate-button").click(function(){
$("#Animate-div").animate({
left : "200px",
opacity : '0.5',
height : '150px',
width : '200px'
}, 2000);
});
//변수로 선언
var div = $("#Animate-div");
//변수를 활용해 반복 줄이기
//애니메이션 순차실행도 가능
//확인결과 색상 변경은 불가능함
$("#Animate-button2").click(function(){
$("#Animate-div").animate({left: '200px', right : '200px'});
div.animate({background:"#cc00cc", width: '200px', height : '300px', opacity : '0.5'});
div.animate({width : '300px', opacity : '0.4'});
div.animate({height : '100px', opacity : '0.3'});
div.animate({width : '100px', opacity : '0.7'});
div.animate({height : '200px', width : '150px'});
div.animate({height : '100px', width : '100px'});
});
});
</script>
<br><br>
<p>JSP는 재미 있어요</p>
<ul id = ul2>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
<button id = prepend2>Prepend 리스트</button>
<script>
//텍스트 앞뒤에 글자 추가하기
$(document).ready(function(){
$("#prepend2").click(function(){
$("#ul2").prepend("<li>New List</li>");
$("#ul2").append("<li>Old List</li>");
});
});
</script>
<br><br>
<img id = img2 src =image/download.png>
<br><br>
<button id = insert1>Insert before</button>
<button id = insert2>Insert after</button>
<script>
$(document).ready(function(){
//이미지 앞뒤에 글자추가하기
//(prepend, append)는 하위요소에
//(before, after)는 선택한요소에 추가함
$("#insert1").click(function(){
$("#img2").before("<b>볼드체</b><br>");
});
$("#insert2").click(function(){
$("#img2").after("<br><i>이텔릭체</i>");
});
});
</script>
</body>
웹 개발자