뤱 ! wrap() : 요소를 씌운다 unwrap() : 요소를 씌우고 있는 요소를 벗긴다 wrapAll() : 전부 감싼다. wrapInner() : 내부를 감싼다.
<script>
$(function()
{
$("#btn1").click(function()
{
$("#aa").hide("fast");
});
$("#btn2").click(function()
{
$("#aa").show("fast");
});
$("#btn").click(function()
{
alert($("body").html());
});
});
</script>
<input type="button" id="btn1" value="숨기기">
<input type="button" id="btn2" value="보이기">
<img id="aa" src="1.webp" width="200">
사진 스르륵 보여주기
fade in,out 이거 야무짐
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function()
{
$("#btn1").click(function()
{
$("#aa").fadeIn();
});
$("#btn2").click(function()
{
$("#aa").fadeOut();
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="fadeIn()">
<input type="button" id="btn2" value="fadeOut()">
<hr>
<img id="aa" src="1.webp" width="150">
</body>
slide 관련 (slow,fast,시간(1/1000)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function()
{
$("#btn1").click(function()
{
$("#aa").slideUp();
});
$("#btn2").click(function()
{
$("#aa").slideDown();
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="slideUp()">
<input type="button" id="btn2" value="slideDown()">
<hr>
<div id="aa"> <img src="1.webp" width="150"> </div>
</body>
slide 슬라이드할 내용 사진이나,텍스트를 div로 감싸주고 슬라이드 시켜서 사용하면 자연스럽게 슬라이드 됨
카테고리 슬라이드 관련 참고코드
// nav 메뉴
$("nav > ul > li").mouseover(function () {
$(this).find(".submenu").stop().slideDown();
});
$("nav > ul > li").mouseleave(function () {
$(this).find(".submenu").stop().slideUp();
});
// // nav 메뉴 끝
설명
(nav > ul > li)에서 태그를 선택하고 마우스를 올렸을때
$(this).find(".submenu") 여기서 this는 (nav > ul > li) 이다.
this를 find(class명 submenu) 찾아서 slideDown()/ slideUp()을 해준다.
근데 stop() 없이 할 경우 명령이 쌓여서 마우스를 내려도 반복하기때문에
stop().slideDown(); 해당 명령어 앞에 stop()을 써준다.
이미지 슬라이드 관련 참고코드
// 이미지 슬라이드
var index_img = 0;
setInterval(function () {
if (index_img < 2) {
index_img++;
} else {
index_img = 0;
}
var slide_position = index_img * (-1200) + "px";
$(".slidelist").animate({
left: slide_position
}, 400);
}, 3000);
// // 이미지 슬라이드 끝
설명
이미지 파일이 3장이고 1번부터 시작해야하기때문에 index_img = 0; 변수를 지정해줌
setInterval 메소드를 사용해서 3000 (3초)마다 실행하게 한다.
if문을 보면 index_img (0) < 2 이므로 참이다.
그래서 index_img++ 로 증감을 시켜준다
index_img < 2 여기서 증감을 다하고 index_img가 2가 되면
else가 되어서 index_img를 다시 0으로 바꿔준다.
(계속 처음으로 돌아가 반복 시키기 위함.)
아래쪽에서 이미지 파일의 움직임을 위한 코드들이다.
변수 slide_position에 index_img * (-1200) + px 을 지정한다.
-1200은 슬라이드 width: 1200px 이므로 그림이 왼쪽으로 빠지면서 다른 그림이
오른쪽에서 들어온다.
아래 쿼리문을 보면 class명 slidelist에 animate메소드를 사용해서
left: slide_position 해줌으로 왼쪽으로 이동하고 400은 (0.4초)에 걸쳐 그림이 넘어감
animate 관련
<style>
#aa {
width:50px;
height:50px;
background:red;
position:absolute;
left:100px;
top:100px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function()
{
var left = 100;
$("#btn1").click(function()
{
ss = setInterval(function()
{
left++;
$("#aa").css("left",left);
if(left==400)
{
clearInterval(ss);
}
},10 );
});
$("#btn2").click(function()
{
$("#aa").animate( // $("요소").animate({타겟},시간);
{
left:"400px"
},4000);
});
$("#btn3").click(function()
{
$("#aa").animate(
{
width:"200px",
height:"200px"
},3000);
});
$("#btn4").click(function()
{
$("#aa").animate(
{
width:"50px",
height:"50px"
},3000);
});
$("#btn5").click(function()
{
$("#aa").animate(
{
left:"300px",
top:"200px"
},3000);
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="오른쪽으로 이동">
<input type="button" id="btn2" value="오른쪽으로 이동2">
<input type="button" id="btn3" value="크기 증가">
<input type="button" id="btn4" value="크기 감소">
<input type="button" id="btn5" value="위치 이동">
<hr>
<div id="aa"></div>
</body>